:http

http-request=“httpRequest“,自定义上传导致的el-upolad上传图片n次问题,解决想了很久

一般的后台管理系统都是在el-dialog 里加el-upload标签，我做的功能是图片先缓存在页面，等带提交的时候在把图片添加到后台代码如下：

<el-upload              class="avatar-uploader"              ref="upload"              action="string"              :show-file-list="fal"              :http-request="httpRequest"              :before-upload="beforeUpload"              :on-change="filechange"              :auto-upload="fal"              >              <img v-if="form.logo" :src="form.logo" class="avatar">              <i v-el class="el-icon-plus avatar-uploader-icon"></i>            </el-upload>

点击添加触发:on-change

filec秋天颜色的诗句hange(file, fileList) {      // 如果没有选取文件，可以加个字段来控制流程      长篇恐怖故事this.localFile=file.raw  // 或者 this.localFile=file.raw      this.upload_flag = true;      /*if(fileList.length===2){        fileList.splice(0,1);      }      el*/      if (this.localFile.type.indexOf("image/") == -1) {        this.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");      } el {        const reader = new FileReader();        reader.read汽车内室清洗AsDataURL(this.localFile);        reader.onload = () => {          this.form.logo = reader.result;        };      }    },

注意了开始埋雷了。然后调用this.$refs.upload.submit();触发http-request=“httpRequest“

httpRequest(param) { // param是自带参数。 this.$refs.upload.submit() 会自动调用httpReque格利雅st方法.在里面取得file      this.$refs['form'].validate((valid) => {        if (valid) {          console.log(param)          var fileObj = param.file; // 相当于input里取得的files          let formData = new FormData();          formData.append("logofile",fileObj);          /*this.form.logo='';*/          uploadLogo(formData).then(respon =>难过的英文 {            this.form.logo = process.env.VUE_APP_BASE_API + respon.imgUrl;            param = null;          });          console.log(this.form)        }      })    }

点击提交（增改界面类似），图片成功到后台，返回主页面表格， 图片成功添加，你以为完事大吉了吗？

你在继续添加图片，你会发现，后台添了两张图片，明明只添了一张，为什么变两张。。。（两张图片分别为之前添的第一张图片和这次添的图片）
注意了，解密开始，再filechange(file, fileList) 里加个console.log( fileList.length) 你第二次添加图片你会发现length 为2，第一次为1.
证明缓存里有两个file;
当你第二次添加调用this.$refs.upload.submit() ，你会发现连续执行了两个httpRequest(param) 神不神，前一个el-dialog都关闭了，缓存的param还在祸害第n次添加或者修改。聪明的你看到这里肯定想到怎么解决了。

解决办法!!!

this.$router.go(0);直接刷新在<el-dialog 里添加 :destroy-on-clo=“true”，意思是关闭清空缓存>完美解决。本人第一次写博客，觉得稍微有点用可不可以给一个小小的赞好吗，转载请千万标明出处。刚毕业在深圳月薪才3000，真的不想，为解决问题的快乐，干杯。。。有没有跟我一样的，抱抱。加油

本文地址：https://blog.csdn.net/weixin_44102328/article/details/109391441