Question

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

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

multer和其他nodejs库似乎与＆＃34; multipart / form-data＆＃34;从角1/2无缝。但是，VueJs无法使用相同的功能。

除了支持＆＃34; multipart / form-data＆＃34;的axios之外，还有其他选择吗？又名 - WebKitFormBoundary ??

非常感谢

Answer 1

我发现了两种在VueJs中实现这一目标的方法。可能会有更多。

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

＆＃13;

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);
    });

＆＃13;

选项2.使用Native XMLHttpRequest（）`

＆＃13;

 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');
      }
    }
  }

＆＃13;

这里有一个有趣的FormData（）浏览器支持点caniuseFormData

对于那些像我这样的人来说，使用content-type =＆＃34; multipart / form-data＆＃34;与axios。它不会起作用。

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 => ...)
    }
}

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

Answer 3

我还面临一个问题，即我必须发送其他一些信息以及图像。我想分享我的所作所为。 我正在尝试上传图片，种类，名称和事件ID。

let logo1 = new FormData
logo1.append('image', this.logo1)
logo1.append('kind', 'logo1')
logo1.append('name', this.$refs.logo1.files[0].name )
logo1.append('eventID',eventID)


axios.post(`/upload`, logo1,
        
  {
    headers:{
      'Authorization' : `${token}`,
      'Content-Type': `multipart/form-data; boundary=${logo1._boundary}` 
 },    

 }).then((res) => {

     console.log(res)


}).catch((error) => {

    console.log(error)

})

注意：postdata参数格式应为 （url，FormData） ，而不是（url，{data：FormData}）

如何提交＆＃34; multipart / form-data＆＃34;来自VueJs

3 个答案: