(实战-改bug)element ui Upload组件上传一次后，再次点击上传没反应-Toy模板网

这篇具有很好参考价值的文章主要介绍了(实战-改bug)element ui Upload组件上传一次后，再次点击上传没反应。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

今日修改bug时，上传组件点击上传，上传成功后，再次点击上传，没有反应，二次上传时http-request的方法没有进入。

原因是：第一次上传文件后，浏览器还保存着我们已经上传的文件，所以要想继续上传文件，就需要在on-success钩子函数中通过ref 拿到它的document元素进行清除已经上传的文件，来看看代码吧文章来源地址https://www.toymoban.com/news/detail-771946.html

   <div>
        <el-upload
          ref="fileUploadBtn"
          class="upload-div right-btn-list-num"
          action
          :limit="1"
          :show-file-list="false"
          :file-list="fileList"
          :on-success="handleSuccess"
          :http-request="uploadFile"
        >
          <el-button size="mini" type="default" :loading="isUploading">重新上传</el-button>
        </el-upload>
      </div>



   handleSuccess(res, file) {
      this.$refs.fileUploadBtn.clearFiles(); //上传成功之后清除历史记录
    },


    // 单个图片保存
    async uploadFile(item) {
      console.log(item, 1111);

      const { v4: uuidv4 } = require('uuid');
      this.isUploading = true;
      let { status, message, content } = await fileRuleGet(this.navbarUnit.navbarUnitId);
      if (status) {
        //1 获取扩展名
        let fileArr = item.file.name.split('.');
        let extra = fileArr[fileArr.length - 1];
        //2.获取上传参数
        const { bucketName, path } = content;
        // 3.拼接参数
        let params = new FormData();
        params.append('file', item.file);
        params.append('path', `${path}${uuidv4()}.${extra}`);
        params.append('bucketName', bucketName);
        params.append('unitId', this.navbarUnit.navbarUnitId);
        // 4.push上传

        fileUploadApi(params).then(res => {
          this.onHandleSucces([res], item.file);
        });
      } else {
        onError(message);
      }
      this.isUploading = false;
    },


    onHandleSucces(resArr, file) {
      // let arr = []
      resArr.map((res, index) => {
        console.log(file.name);

        let fileArr = file.name.split('.');
        console.log(fileArr);

        let extra = fileArr.pop();
        console.log(extra);
        let fileSize = (file.size / 1024).toFixed(0);
        const fileObj = {
          file_name: fileArr.join('.'), //文件名称
          file_size: fileSize, //文件大小
          file_format: extra, //文件名后缀
          file_suffix: extra,
          file_path: `${res.content.bucketName}/${res.content.path}`,
          store_id: res.content.storeId
        };
        this.detailsruleForm.file_name = file.name;
        this.detailsruleForm.file_size = fileObj.file_size;
        this.detailsruleForm.file_format = fileObj.file_format;
        this.detailsruleForm.file_suffix = fileObj.file_suffix;
        this.detailsruleForm.file_path = fileObj.file_path;
        this.detailsruleForm.store_id = fileObj.store_id;
      });
      this.isUploading = false;
    },

到了这里，关于(实战-改bug)element ui Upload组件上传一次后，再次点击上传没反应的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！