5月28

element-ui中upload组件上传只能点击一次,第二次失效的如何解决

| |
14:53Web开发  From: 本站原创
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-button size="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)
                    }

                })
            },


来源:Heck's Blog
地址:https://www.heckjj.com/post/592/
转载时须以链接形式注明作者和原始出处及本声明,否则将追究法律责任,谢谢配合!
阅读(90) | 评论(0) | 引用(0)