如何从 VueJs 提交“multipart/form-data”

Question

我在前端使用 VueJs / axios，在 nodejs 中使用 multer 来进行简单的文件上传。

到目前为止，所有的尝试都没有成功。虽然这可以使用 ng-upload 和其他类似插件以 ¹⁄₂ 的角度以 100 种方式实现。但是 VueJs 似乎缺少这个基本功能。根据我的研究，axios 不支持“multipart/form-data”。参考 https://github.com/mzabriskie/axios/issues/789 。

multer 和其他 nodejs 库似乎可以从角度 ¹⁄₂ 无缝地使用“multipart/form-data”。但是，相同的功能在 VueJs 中不起作用。

除了 axios 之外，还有其他支持“multipart/form-data”的替代方案吗？又名 WebKitFormBoundary ？

非常感谢

原文由 Sumanta 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我在 VueJs 中找到了两种实现此目的的方法。可能还有更多。

选项 1. 使用 Axios。基于以上 Bert Evans 的回答

 const formData = new FormData();
  formData.append("file", _file);
  formData.append("id", 7878);
  axios.post("/api/uploadFile", formData)
    .then(function (result) {
      console.log(result);
    }, function (error) {
      console.log(error);
    });

选项 2. 使用本机 XMLHttpRequest() `

  var formData = new FormData();
  formData.append("file", _file);
  formData.append("id", 7878);
  var request = new XMLHttpRequest();
  request.open("POST", "/api/uploadFile");
  request.send(formData);
  request.onreadystatechange = function () {
    if (request.readyState === 4) {
      if (request.status === 200 && request.statusText === 'OK') {
        console.log('successful');
      } else {
        console.log('failed');
      }
    }
  }

FormData() 浏览器支持的一个有趣点在这里 caniuseFormData

也适用于像我这样尝试使用 content-type = “multipart/form-data” 和 axios 的人。它不会工作。

原文由 Sumanta 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以为此使用 FormData ，这非常简单。

让我给你看一个例子：

 // html
<button ref="uploadBtn" @onChange="upload">Upload Files</button>

// js
methods: {
    upload () {
        let files = this.$refs.uploadBtn.files
        let formData = new FormData()

        // if you want to upload multiple files at once loop
        // through the array of files
        formData.append('attachment', files[0])
        axios.post(url, formData).then(response => ...)
    }
}

这应该可以解决问题，您真的不需要第 3 方插件。

原文由 Helder Lucas 发布，翻译遵循 CC BY-SA 3.0 许可协议