Vue+elementui如何实现上传图片且带字段提交【基于前端角度】

主要谈一下实现过程，首先给大家看下贴图：

我用了一个简化版本的来做的，具体的字段可以自己加进去，下面说一下我的实现过程吧
第一步：搭建页面（主要用elementUI自带组件）
搭建时我采用的是elementUI的el-upload标签，因为不是即时上传，所以action我设置为空，如下代码所示：

<el-upload
  action=""
  list-type="picture-card"
  ref="upload"
  :file-list="imgList"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove"
  :before-upload="beforeupload"
  :on-change="uploadFile"
  :auto-upload="false"
>
  <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>

第二步：页面联动（主要触发上传且取消上传）
这个比较好的是支持上传完之后可以自行删除的操作，如下所示的图标，当然点击时候要添加这个移除属性on-remove和执行方法。

依赖参数如下：
dialogImageUrl: “”,
fileStore: “”,
主要是存放图片的地址和临时存放文件流的
依赖方法如下：

1.文件清除函数
handleRemove(file, fileList) {
      debugger;
      this.fileStore = null;
      console.log(file, fileList);
  },
2.文件预览函数
handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.addKeyPersonForm.file = file.url;
      this.doUpload = true;
      this.fileStore = file;
      this.$refs["addKeyPersonForm"].validateField("file");
    },

3.上传前动作函数
// 阻止upload的自己上传，进行再操作
    beforeupload(file) {
      this.formData.append("file", file);
      this.fileStore = file;
      return false;
 },
4.文件变换函数
uploadFile(file, fileList) {
      console.log(file.raw);
      this.fileStore = file.raw;
 },

当然这些函数的目的主要还是只是为了前端的图片可视化及数据能够临时存放起来，我们是最后统一将数据进行提交的。
第三步：联调接口（主要是请求封装）
这个是个关键，主要采用的是post请求的方式，很多人不解的是headers里面的Content-Type怎么写，我们封装数据的时候记得用这种方式：

let formdata = new FormData();
formdata.append("file", this.fileStore);
formdata.append("orderId", this.editForm.orderId);

然后最后再通过axios进行数据的请求，如下所示请求接口函数：

const reqload = (method, url, params) => {
    return axios({
        method: method,
        url: url,
        headers: {
            'Content-Type': 'multipart/form-data',
            // 'Content-Type': 'application/x-www-form-urlencoded',
            token: localStorage.getItem('logintoken')
        },
        data: params,
        traditional: true,
        transformRequest: []
    }).then(res => res.data);
};

然后到了这里，基本所有的流程都已覆盖，期待我们的成长，网上好多都是抄来抄去的，看的我头都大，也希望能给您带来小小的帮助哈
至于后端的写法我就用两张核心业务图给大家展示哈，希望能给您带来一些灵感！


喜欢的话可以关注下博主哈，随时为您解忧！！！

【片尾彩蛋】

特备皇榜等您来上！

喜欢支持博主的可以上皇榜哟， 皇榜地址点击此处即可进入