el-upload 上传多张图片 可预览，删除

 代码：

 <el-upload
            class="upload-demo"
            :action="uploadImgUrl"
            v-model="personalityForm.logo"
            ref="uploadlogo"
            :limit="3"
            accept=".png,.jpg"
            :headers="headers"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccesslogo"
            :on-remove="handleFileRemove"
            :on-exceed="masterFileMax"
            show-file-list
            :file-list="listLogo"
            drag
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
            <div slot="file" slot-scope="{ file }">
              <li class="el-upload-list__item is-success">
                <a
                  @click="() => openUrl(file)"
                  class="el-upload-list__item-name"
                >
                  <i class="el-icon-document"></i>{{ file.name }}
                </a>
                <label class="el-upload-list__item-status-label">
                  <i class="el-icon-upload-success el-icon-circle-check"></i>
                </label>
                <i @click.stop="handleRemove(file)" class="el-icon-close"></i>
              </li>
            </div>
          </el-upload>

data:

      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      listLogo: [],

upload: {         // 是否禁用上传         isUploading: false,       },

methods:

      // 文件上传中处理     handleFileUploadProgress(event, file, fileList) {       this.upload.isUploading = true;     },

  handleFileSuccesslogo(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.personalityForm.logo.push(response.url);
      let uploadFiles = this.$refs.uploadlogo.uploadFiles;
      console.log("uploadFiles",uploadFiles)
      console.log("this.personalityForm.logo", this.personalityForm.logo);
      // this.$refs.uploadlogo.clearFiles();
      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
    },
    handleFileRemove(file, fileList) {
      this.personalityForm.logo = "";
    },
    openUrl(file) {
      window.open(file.response.url);
    },
    handleRemove(file) {
      let uploadFiles = this.$refs.uploadlogo.uploadFiles;
      let index = uploadFiles.indexOf(file);
      uploadFiles.splice(index, 1);
      let aa=[]
      for(let i=0;i<uploadFiles.length;i++){
        aa.push(uploadFiles[i].response.url)
      }
      this.personalityForm.logo=aa
      console.log("uploadFiles",uploadFiles)
      console.log("this.personalityForm.logo", this.personalityForm.logo);
    },
    masterFileMax(){
      this.$message.warning(`请最多上传 3 个文件。`);
    }

 

标签：el,预览,upload,personalityForm,let,file,上传,uploadFiles
来源： https://www.cnblogs.com/guohanting/p/16140217.html