如何从VueJs提交"multipart/form-data"

Question

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

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

multer和其他nodejs库似乎可以从angular 1/2无缝地使用"multipart/form-data".但是,VueJs无法使用相同的功能.

除了支持"multipart/form-data"的axios之外还有其他选择吗 - WebKitFormBoundary？

非常感谢

Answer 1

您可以为此使用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 => ...)
    }
}

这应该可以解决问题，您实际上并不需要第三方插件。

Answer 2

我在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.使用Native 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

对于那些像我这样的人来说,使用axios使用content-type ="multipart/form-data".它不会起作用.