标签：el 预览 upload personalityForm let file 上传 uploadFiles

 代码：

 <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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。