美文网首页
element使用upload组件时,增加覆盖第一个文件功能

element使用upload组件时,增加覆盖第一个文件功能

作者: Poppy11 | 来源:发表于2020-09-10 18:01 被阅读0次

    首先使用组件,这里记住就不要使用limit了,file-list是关键

    <el-upload
        v-else
        class="upload"
        :drag="true"
        action=""
        :multiple="true"
        ref="upload"
        accept='.mm'
        :file-list="fileList"
        :auto-upload="false"
        :on-change="onChangeToolFile"
        :before-remove="beforeRemove"
        :on-remove="onRemoveFile"
      >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
      </el-upload>
    
    onChangeToolFile每次上传文件的时候都会触发这个方法,这时候我们就获得了fileList,也就是上传文件的列表,每次取最后一个文件就好了,然后赋值给我们自定定义在data里面的fileList。需要触发上传任务的时候, 取this.fileList[0]这里面的文件就好。
    onChangeToolFile(file, fileList){
            if (fileList.length > 0) {
              this.fileList = [fileList[fileList.length - 1].raw]  // 这一步,是 展示最后一次选择的文件
            }
          },
    
          // 移除文件之前
          beforeRemove(file, fileList) {
            return this.$msgbox.alert(`确定移除 ${file.name}?`)
          },
    
          // 移除文件
          onRemoveFile(file, fileList) {
            this.upFileList = []
            for (let x of fileList) {
              if (x.raw) {
                this.upFileList.push(x.raw)
              }
            }
          },
    
    

    相关文章

      网友评论

          本文标题:element使用upload组件时,增加覆盖第一个文件功能

          本文链接:https://www.haomeiwen.com/subject/hunpektx.html