自定义文件上传第二次点击无效

sleeppingfrog

于 2022-12-02 18:23:27 发布

阅读量687

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/baidu_41601048/article/details/128152568

版权

vue 专栏收录该内容

57 篇文章 2 订阅

订阅专栏

封装了一个文件上传组件，

 <input class="upload-btn" type="file" :ref="refName" @change="upload" multiple />
    <el-button @click="trigger" type="primary">上传</el-button>
    <span v-if="loading" class="fs12"><i class="el-icon-loading"></i>上传中...</span>
    <span v-if="isSuccess" class="succ"><i class="el-icon-circle-check"></i> 上传成功</span>



export default {
  props: ['refName'],
  data() {
    return {
      loading: false,
      isSuccess: false,
      fileList: [], //文件列表
      urlList: [], //后端返回的url地址列表
    };
  },
  created() {},
  mounted() {},
  methods: {
    upload(e) {
      this.fileList = e.target.files;
      this.loading = true;
      //   debugger;
      uploadImgs(this.fileList)
        .then(({ data }) => {
          console.log('res:', data);
          this.urlList = data.data || [];
          this.loading = false;
          this.isSuccess = true;

          this.$emit('success', this.urlList);
        })
        .catch((err) => {
          console.log('err:', err);
          this.loading = false;
          this.$message.error(err);
        });
    },
    trigger() {
      //   this.$refs[this.refName].click();
      //   setTimeout(() => {
      //     this.$refs[this.refName].click();
      //   }, 1000);
      this.$refs[this.refName].dispatchEvent(new MouseEvent('click'));
      console.log(' this.$refs[this.refName]', this.$refs[this.refName].value);
      this.$refs[this.refName].value = null;
    },
  },

但是发现第一次上传成功，但是第二次上传同样文件无任何反应。最后发现需要做如下处理。在文件上传成功以后需要 e.target.value = '';

如下

 upload(e) {
      this.fileList = e.target.files;
      this.loading = true;
      //   debugger;
      uploadImgs(this.fileList)
        .then(({ data }) => {
          console.log('res:', data);
          this.urlList = data.data || [];
          this.loading = false;
          this.isSuccess = true;
          e.target.value = '';  //注意这里
          this.$emit('success', this.urlList);
        })
        .catch((err) => {
          console.log('err:', err);
          this.loading = false;
          this.$message.error(err);
        });
    },
    trigger() {
      //   this.$refs[this.refName].click();
      //   setTimeout(() => {
      //     this.$refs[this.refName].click();
      //   }, 1000);
      this.$refs[this.refName].dispatchEvent(new MouseEvent('click'));
      console.log(' this.$refs[this.refName]', this.$refs[this.refName].value);
      this.$refs[this.refName].value = null;
    },