vue+axios实现带文件表单上传

vue+axios实现带文件表单上传

最近vue项目中需要实现带图片的表单上传功能,业务场景如下:

使用element-ui的upload组件,当然也可以利用原生input标签设置type='file’结合jquery实现文件选择和获取,重点在于获取file对象并使用FormData对象传参,代码如下:

            <el-upload
              style="display: inline-block;"
              size="mini"
              :auto-upload="false"
              class="upload-demo"
              action=""
              :multiple="false"
              :show-file-list="false"
              :limit="1"
              :on-change="getFile">

获取的file对象如图,

//获取上传的file对象
getFile(file){
  this.currentFile = file.row;
},
//保存
saveForm(){
           //构造参数
           let data = new FormData();
           data.append('name', this.form.name);
           data.append('sort', this.form.sort);
           data.append('description', this.form.description);
           data.append('files', this.currentFile); //file会转为二进制
           //post方法传参
           axios.post(this.baseUrl+apiList.insertPhoto,data
           ).then((res) => {
             console.log(res);
           });
},

注意,在控制台打印FormData只能得到空对象,使用.get(‘key’)的方法查看具体value.可以在控制台的network看到请求头和formdata的详细内容如下,其中content-type的改变是axios检测到formdata对象类型删除默认值后交由浏览器设置而成.

(PS.关于FormData对象的详细资料可以参考MDN)