最近做后台系统发现图片上传的问题,项目是Vue+element-ui搭建框架,图片上传点击第一次正常请求接口没问题,第二次点击没反应没有正常去请求接口。

原因:第一次点击上传成功之后没有清除。

方案:在请求成功的函数中加入

<el-upload
  class="upload-demo"
  action="http://192.168.0.11:8082/common/uploadFile"
  multiple
  ref="upload"
  :headers="headers"
  :show-file-list="false"
  :onError="equityImgError"
  :onSuccess="equityImgSuccess"
   >
   <img v-if="memberbranchRuleVO.logoUrl" :src="memberbranchRuleVO.logoUrl" class="avatar">
   <span v-else class="avatar-up">点击上传</span>
   <div slot="tip" class="tip-class-img">
   格式:png/jpg<br>
   大小:×××/×××
   </div>
 </el-upload> 

    equityImgSuccess(response, file, fileList) {
      // debugger
      this.memberbranchRuleVO.logoUrl = response.data.url;
      this.$refs.upload.clearFiles(); //上传成功之后清除历史记录
    },

图片上传前端传给后端请求头,也就是代码中的:header,header在data中定义。

Logo

前往低代码交流专区

更多推荐