Vue以formdata的格式将文件传给后端

最近在项目中有使用到图片上传，在此记录一下。

使用步骤

1.使用了element-ui的upload组件

          <el-upload class="avatar-uploader"
                     action=""
                     :on-change="(val)=>changeFile(val)"
                     :auto-upload="false"
                     accept=".jpeg,.png,.jpg,.bmp"
                     :show-file-list="false">
            <img v-if="imageUrl"
                 :src="imageUrl"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

2.将文件转化为formdata

    changeFile (val) {
      let formData = new FormData();
      //file是键，val.raw是要传的文件，val.name是要传的文件名
      formData.append('file', val.raw, val.name);
    },

3.将formdata传给后端

    changeFile (val) {
      let formData = new FormData();
      formData.append('file', val.raw, val.name);
      //上传接口
      Api.upload(formData).then((res) => {
        if (res.code== 200) {
			
        }
      })
    },

总结

前端其实有几种方法，在此只记录其中的一个。