使用FormData上传文件

 

这是我之前使用element-ui上传文件的时候遇见的一个问题；

getFileMsg是我的上传函数：

  <el-upload
     ref="upload"
     :limit="1"
     class="upload-demo newUploadClass"
     :multiple="false"
     action=""
     :file-list="fileList"
     :http-request="getFileMsg"
     list-type="picture">
     <el-button size="small" type="primary">选择图标</el-button>
  </el-upload>

代码：

param里面是上传需要的详情信息

上面是我打印param的值；

 

        // 项目 上传图片
        getFileMsg(param) {
            this.verifyImg = '';
            let fileObj = param.file;
            let formData = new FormData();
            formData.append("file", fileObj);
            this.$axios.post(this.$api.newProjectUpload, formData).then(res => {
                this.technicianPhoto = res.data;
            });
        },

获取到file;

       FormData可以把它理解成一个虚拟的表单对象，它只有一个方法append，这个可以在浏览器console一下就知道了。我们可以通过append向FormData里面添加各种需要提交的数据。可以先创建一个空的 FormData 对象,然后使用 append() 方法向该对象里添加字段，如下：

let formData = new FormData();

 

把formData发送给后台，如下：（上传就成功了，后台会返回给前端一个路径，用来前端页面展示）

后端返回给前端的路径：