el-upload上傳單張圖片

今天項目要實現圖片單張上傳功能，完善了很長時間，現在記錄下

實現效果如下所示（不會上傳gif，用幾張圖吧）

起始

 

 

 點擊后出現上傳選項然后選擇要上傳的圖片，可以發現后面不會再顯示多的上傳選項

 

 

 其中也可以點擊查看和刪除

 

 

 當點擊查看的時候會彈出dialog，當點擊刪除的時候已上傳的圖片會刪掉，並再次出現要上傳帶+號的默認圖片

這是點擊查看的樣式

 

 

 這是刪除后的樣式，可以發現又變了回來

 

 

 下面看下代碼

template：

 <el-upload
                action=""
                :limit="1" //上傳文件數
                :on-preview="handlePictureCardPreview"     //其余為el-upload自帶的鈎子函數，可上官網自行查看
                :on-change="handleChange"
                :on-progress="onProgress"
                :on-success="imgSuccess"
                :on-error="imgError"
                :http-request="uploadHttp"   //自定義上傳方法
                list-type="picture-card"
                :on-remove="handleRemove"
                :class="{disabled:uploadDisabled}"   //用來控制上傳后+號是否顯示
                :file-list="fileList"
            >
            </el-upload>
。。。。。。

<el-dialog :modal-append-to-body="false" :visible.sync="imgVisible" width="30%">
  <img width="100%" :src="dialogImageUrl" alt="圖片未找到"/>
</el-dialog>

這里定義了一個upload方法和一個dialog用來顯示預覽照片，注意這里有個坑，dialog一定要在外面，是相對於全局定義的

如果在el-upload里面定義了dialog會發現關閉了預覽dialog后又會執行上傳方法，來讓你上傳文件，

然后data里面聲明

   return {
      //上傳身份證正面相關參數
      limitCount: 1,
      uploadDisabled: false,
      // 是否顯示預覽圖片
      imgVisible: false,
      // 預覽圖片url
      dialogImageUrl: "",
      fileList: [],
}

 methods方法中講明

 onProgress(event, file, fileList) {this.uploadDisabled = false;
    },
    // 圖片上傳成功
    imgSuccess(response, file, fileList) {this.uploadDisabled = true;
    },
    // 圖片上傳失敗
    imgError(err, file, fileList) {this.uploadDisabled = true;
    },
    // 預覽圖片
    handlePictureCardPreview() {
      this.imgVisible = true;
      this.uploadDisabled = true;
    },
    // 刪除圖片
    handleRemove(file, fileList) {
      this.uploadDisabled = false;
      // this.hideUpload = fileList.length >= this.limitCount;
    },
//圖片更改
    handleChange(fileList) {
      this.uploadDisabled = fileList.length >= this.limitCount;
      this.uploadDisabled = true; 
    },

    uploadHttp(file) {  //定義上傳方法
      let _this = this;
      //獲取文件信息
      let fileLen = file.file;
      let name = fileLen.name
      let rand = this.calculate_object_name(name);  //把文件名變為隨機數，也可以不更改，這里為了防止文件名重復
      client().multipartUpload(rand , fileLen).then(function (res) {  //調用阿里oss上傳
        let str = res.res.requestUrls[0];
        _this.dialogImageUrl = 自有域名 + rand ;
        console.log(_this.dialogImageUrl);
      }).catch((err) => {
        console.log(err)
      })
    },

style中定義的css變量

.disabled .el-upload--picture-card {
  display: none;
}

.baseTheme .el-upload--picture-card {
  background-image: url("../../../../static/img/背景圖片.png");
  background-position-x: center;  //背景圖居中顯示
  background-position-y: center;
  background-size: 100% 100%;    //背景圖填充
  width: 190px;   //寬高可變
  height: 150px;
}

.baseTheme .el-upload-list--picture-card .el-upload-list__item {
  width: 190px;    //寬高與背景圖一致
  height: 150px;
  position: inherit;

}

.baseTheme .el-upload-list--picture-card .el-upload-list__item-actions {
  width: 190px;   //寬高與背景圖一致
  height: 150px;
}