Element UI Upload 上传文件只能上传一次 ,再次点击上传后无反应的问题

首页 / 新闻资讯 / 正文

Element UI Upload 上传文件上传文件一次 ,不论是上传成功之后修改文件再上传还是上传失败重新上传,再次点击上传均无反应。

方法一:利用 :on-success

ref=‘upload’
:on-success=“handleSuccess”

注意:ref='upload 一定要加上ref 不然不起作用

                <el-upload                         class="upload-demo"                         action=""                         :limit="1"                         :show-file-list="false"                         :http-request="uploadLogo"                         ref='upload'                         :on-success="handleSuccess"                 >                     <el-button style="width: 150px; height: 35px;line-height: 0;margin-left: 20px" size="medium"                                type="primary">                         {{$t('StaffManage.bulkImport')}}                     </el-button>                 </el-upload>
        handleSuccess(res, file) {             this.$refs.upload.clearFiles(); //上传成功之后清除历史记录             // this.tableReload()         },

方法二:利用if el-upload让移除文档流

<el-upload                         v-if="!form.contractFileUrl"class="upload-demo"action=""                         :limit="1"                         :show-file-list="false"                         :http-request="uploadLogo"><el-buttonsize="medium"type="primary">{{$t('AttendanceInformation.ClickUpload')}}</el-button></el-upload>
            uploadLogo(param){let _this= this                 _this.form.contractFileUrl='1'let formData= new FormData();                 formData.append("file", param.file);                 _this.$send.post({url:'/contract/upload', data: formData}, res=>{if(res.code===10000){                         _this.isdisabled=true                         _this.form.contractFileUrl= res.data.url                         _this.form.contractFileId= res.data.id}else{                         _this.form.contractFileUrl= null                         _this.form.contractFileId= null                         _this.$msg.error(res.message)}})},
Top