axios上传文件

二、实现方法

1、读取文件

通过input标签，我们可以得到一个file文件将这个file进行处理。

<input class="upload" type="file" ref="upload" accept="image/jpeg,image/jpg,image/png" @change="uploadImg($event)">

 // 选择本地图片
    uploadImg (e) { let file = e.target.files[0]
    } 复制代码

2、实例化FormData对象

因为我们是以表单的形式上传文件，所以必须进行实例化，再添加属性以及值。注意，这里必须进行实例化，否则无法上传。我们可以把formdata作为参数上传给后端。

 uploadImg (e) {
    // 获取file let file = e.target.files[0]
      // 实例化 let formdata = new FormData()
      formdata.append('file', file)
    } 复制代码

3、配置axios

在axios配置中，我们需要用POST方法，再配置headers,需要这个浏览器才知道是表单。

 headers: { 'Content-Type': 'multipart/form-data;charset=UTF-8' } 复制代码

 uploadImg (e) {
    // 获取file let file = e.target.files[0]
      // 实例化 let formdata = new FormData()
      formdata.append('file', file)
      upload(formdata).then(res => {
        // ...   
       })
    } 复制代码

基本的步骤就以上3个，但是开发过程中会遇到一些不明觉厉的坑，下面总结一下。

三、问题

1、请求报文里面的请求参数为空

由于出现请求参数为空，我们无法发送给后端数据，无法保存成功。遇到这个可以检查一下你的axios请求拦截部分是否对数据进行了处理，我遇到是的axios请求拦截中，multipart/form-data时候，数据直接就被Qs进行序列化了，因为无法序列化FormData的内容，所以返回的data就是一个空的内容，导致最后判断是不是formData对象时出错。解决方法，如果'Content-Type' === 'multipart/form-data;charset=UTF-8'就是直接返回data，不进行序列化。

transformRequest: [function (data, headers) { if (headers['Content-Type'] === 'application/x-www-form-urlencoded') {
      // 把一个参数对象格式化为一个字符串 return qs.stringify(data)
    } else if (headers['Content-Type'] === 'multipart/form-data;charset=UTF-8') { return data
    } else {
      headers['Content-Type'] = 'application/json' } return JSON.stringify(data)
  }]