Vue use element upload

 

 

 

 

 

 

 

　　　　　　<el-upload
              action
              v-if="IsUpload"
              style="display:inline"
              list-type="picture-card"
              :on-remove="handleRemove"
              :on-success="onSuccess"
              :on-change="on_change"
              :before-remove="before_remove"
              :limit="1"
              :before-upload="onBeforeUpload"
              accept=".jpg, .png"
              :http-request="uploadFile"
              :on-exceed="Exceed"
              :file-list="imgUrls"
            >
              <i class="el-icon-plus"></i>
              <i
                id="uploadImg"
                style="position: absolute;top: 29%;left: 50%;transform: translateX(-50%);color: #F56C6C;font-size: 12px;display:none"
              >请上传图片</i>
            </el-upload>

　　

 

 

    // before uploading hook 
　　onBeforeUpload (File) { 
      // the console.log (File) 
      const = file.type isJPG === "Image / JPEG"; 
      const = file.type isPng === "Image / PNG"; 
      IF (!! isJPG && isPng) { 
        . the this $ Message.Error An ( "upload pictures can only be a JPG / PNG format!"); 
      } 
      return isJPG || isPng; 
    },

　　

    // custom upload 
    the uploadFile (File) { 
      the console.log (File); 
      the let form the FormData new new = (); 
      // rear end accepts parameter can accept multiple parameters 
      form.append ( "file", file.file) ; 
      the this $ POST (. 
        "/ ADMIN / SYS-File / uploadImg", 
        form, 
        RES => { 
          
        }, 
        ERR => { 
          the this $ Message.Error An (err.msg);. 
          the throw ERR; 
        } 
      ); 
    },

　　

 

 

 

    // 移出之前钩子
    before_remove(a, b) {
      console.log(a, b);
      // console.log( b.findIndex(item => item.uid == a.uid))
      this.count = b.findIndex(item => item.url == a.url);
    },