前端上传文件中遇到的问题以及解决办法

需求：前端上传音频文件，然后发送请求，获取后端返回的url。

当我做这一模块时，因为上传文件有误，导致报错，

报错信息：Current request is not a multipart request

然后百度，发现需要修改前端请求头为multipart/form-data，具体修改方法：

onUpload(){
   let [url,httpConfig] = [
        `/api...`,
        {
            //参数
         }

    ]
   // 设置请求头
   let requestConfig = {
        headers: {
        'Content-Type': 'multipart/form-data'
        },
      }
    this.$http.post(url,httpConfig,requestConfig ).then(res=>{
       console.log(res);
    })

}

修改之后，发现content-type并没有修改。但是这时候请求报错原因有所改变

报错信息：Required request part ‘file‘ is not present   可以得知文件参数不一致

又去百度，发现前端上传文件需要通过formData()，具体代码：

getMP3Url(file){
      let msg = this.$Message.loading({
        content:'正在上传文件',
        duration:0
      })
      // 向formData 添加文件
      let fileFormData = new FormData();
      fileFormData.append('file',file);
      // 如果new FormData() 了 就不需要改请求头了
      let requestConfig = {
        headers: {
        'Content-Type': 'multipart/form-data'
        },
      }
      let url = ``
      this.$http.post(url,fileFormData).then(res=>{
        console.log(res);
      }).catch(err=>{
        msg()
        console.log(err);
})

这样就可以上传文件啦，这时候发现，当使用formData之后，前端不修改请求头，也可以请求成功，content-type也自动变成multipart/form-data

前端上传文件还可以通过base64位

具体代码：

getdeviceNameplatePath(content) {
      this.getBase64(content.file).then(res => {
        // 设置响应式 图片base64位信息
        this.$set(this.form, 'imgUrl', res)
      })
},
// 转城base64文件
getBase64(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader()
        let imgResult = ""
        reader.readAsDataURL(file)
        reader.onload = function () {
          imgResult = reader.result
        }
        reader.onerror = function (error) {
          reject(error)
        }
        reader.onloadend = function () {
          resolve(imgResult)
        }
      })
},

总结：当前端需要上传文件时，总的来说有两种方法，base64和formData，具体用那种就看后端需要什么格式。有问题欢迎指出~