如何使用 Axios 从表单发布文件

IT技术 javascript ajax file-upload axios
2021-01-22 23:30:56

当我使用以下命令将文件发布到flask服务器时使用原始 HTML 我可以从flask请求全局访问文件：

<form id="uploadForm" action='upload_file' role="form" method="post" enctype=multipart/form-data>
    <input type="file" id="file" name="file">
    <input type=submit value=Upload>
</form>

在flask中： 

def post(self):
    if 'file' in request.files:
        ....

当我尝试对 Axios 执行相同操作时，flask 请求全局为空：

<form id="uploadForm" enctype="multipart/form-data" v-on:change="uploadFile">
<input type="file" id="file" name="file">
</form>

uploadFile: function (event) {
    const file = event.target.files[0]
    axios.post('upload_file', file, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
    })
}

如果我使用上面相同的 uploadFile 函数，但从 axios.post 方法中删除标头 json，我会在我的flask请求对象的表单键中得到一个字符串值的 csv 列表（文件是 .csv）。

如何获取通过 axios 发送的文件对象？

6个回答

将文件添加到formData对象，并将Content-Type标题设置为multipart/form-data.

var formData = new FormData();
var imagefile = document.querySelector('#file');
formData.append("image", imagefile.files[0]);
axios.post('upload_file', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
})
发布文件后。我们需要从 HTTP 请求访问它们还是需要从服务器端的参数访问它们。
2021-03-10 23:30:56
惊人的 ！我正在发送 'data:{ data:formData}' 这产生了错误 412。它与data:formData
2021-03-10 23:30:56
@ParthPatel ：我$_FILES正在使用 PHP 在服务器端获取文件
2021-03-16 23:30:56
注意：在浏览器上下文中运行时，该代码段按原样工作。要在 node.js 中运行，需要传递由formData.getHeaders()axios计算的标头。这是 axios 的一个已知问题；参见例如https://github.com/axios/axios/issues/789
2021-03-18 23:30:56
感谢这篇文章，但我仍然不明白为什么我们需要FormData. 根据 axios 的文档，File和FormData都被视为 仅浏览器，因此可以平等地看到两种方式（github.com/axios/axios#request-config）
2021-04-03 23:30:56

使用 Vue 的示例应用程序。需要在 localhost 上运行的后端服务器来处理请求：

var app = new Vue({
  el: "#app",
  data: {
    file: ''
  },
  methods: {
    submitFile() {
      let formData = new FormData();
      formData.append('file', this.file);
      console.log('>> formData >> ', formData);

      // You should have a server side REST API 
      axios.post('http://localhost:8080/restapi/fileupload',
          formData, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }
        ).then(function () {
          console.log('SUCCESS!!');
        })
        .catch(function () {
          console.log('FAILURE!!');
        });
    },
    handleFileUpload() {
      this.file = this.$refs.file.files[0];
      console.log('>>>> 1st element in files array >>>> ', this.file);
    }
  }
});

https://codepen.io/pmarimuthu/pen/MqqaOE

如果您不想使用FormData对象（例如，您的 API 采用特定的内容类型签名并且multipart/formdata不是其中之一），那么您可以这样做：

uploadFile: function (event) {
    const file = event.target.files[0]
    axios.post('upload_file', file, {
        headers: {
          'Content-Type': file.type
        }
    })
}

这对我有用，我希望对某人有所帮助。

var frm = $('#frm');
let formData = new FormData(frm[0]);
axios.post('your-url', formData)
    .then(res => {
        console.log({res});
    }).catch(err => {
        console.error({err});
    });
@JeffBluemelContent-Type标头是自动设置的。你应该有那些未定义的。
2021-03-10 23:30:56
这太棒了！我从未想过您可以发送整个表格。谢谢！
2021-03-22 23:30:56
使用 Nuxt - 这终于对我有用了。删除headers: { 'Content-Type': 'multipart/form-data' }是从选项获得服务器响应后实际发送帖子的唯一方法。我可能做错了什么，但它正在起作用，我不理会它，哈哈
2021-03-25 23:30:56

分享我在 React 和 HTML 输入方面的经验

定义输入字段

<input type="file" onChange={onChange} accept ="image/*"/>

定义 onChange 监听器

const onChange = (e) => {
  let url = "https://<server-url>/api/upload";
  let file = e.target.files[0];
  uploadFile(url, file);
};

const uploadFile = (url, file) => {
  let formData = new FormData();
  formData.append("file", file);
  axios.post(url, formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    }).then((response) => {
      fnSuccess(response);
    }).catch((error) => {
      fnFail(error);
    });
};
const fnSuccess = (response) => {
  //Add success handling
};

const fnFail = (error) => {
  //Add failed handling
};
其它你可能感兴趣的问题
上一篇使用按位或 0 对数字求底 下一篇全局命名空间会被污染是什么意思？