element上傳圖片組件使用方法|圖片回顯|格式轉換base64

upload上傳組件的使用方法

上傳圖片後自動上傳（也可以手動上傳），圖片上傳成功後由後端返回特定圖片地址，在表單提交後將表單數據同圖片地址一併返回即可完成圖片上傳功能。

組件HTML

<!-- 上傳圖片 -->
<div style="margin: 4px 0">圖片上傳（僅支持jpg、png格式）</div>
<el-upload
           class="upload"
           :class="{ hide: hideUpload }"
           action="#"
           list-type="picture-card"
           :auto-upload="true"
           :limit="3"
           :http-request="uploadFiles"
           :before-upload="beforeAvatarUpload"
           :on-change="onChange"
           :on-success="onSuccess"
           :on-remove="handleRemove"
           :file-list="fileList"
           accept="image/jpeg,image/gif,image/png,image/jpg"
           >
    <i slot="default" class="el-icon-plus"></i>
</el-upload>

需要聲明部分變數

方法

1.將圖片轉換為base64的方法

//文件轉base64
getBase64(file) {
    return new Promise((resolve, reject) => {
        let reader = new FileReader()
        let fileResult = ''
        reader.readAsDataURL(file) //開始轉
        reader.onload = function () {
            fileResult = reader.result
        } //轉 失敗
        reader.onerror = function (error) {
            reject(error)
        } //轉 結束  咱就 resolve 出去
        reader.onloadend = function () {
            resolve(fileResult)
        }
    })
},

2.數組根據內容刪除對應元素

// 對應內容的索引
Array.prototype.indexOf = function(val) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == val) return i;
    }
    return -1;
};
// 刪除對應索引的內容
Array.prototype.remove = function(val) {
    var index = this.indexOf(val);
    if (index > -1) {
        this.splice(index, 1);
    }
};

3.編輯圖片並回顯

已經上傳過的圖片如果需要進行編輯的話需要在進行上傳之前先將已經上傳過的圖片已規定的格式存入圖片列表中

放在切換至引用

this.picArr = [];
// 編輯上傳過的圖片
if (row.picList.length > 0) {
    for (let i = 0; i < row.picList.length; i++) {
        let param = { name: "", url: "", data: "" };
        param.name = row.picList[i].id;
        param.url = "/xxx/xxx/xxx?picUrl=" + row.picList[i].picurl;
        this.picArr.push(param);
    }
}

通過接受進來的數據將已經上傳過的圖片進行格式化，其中需要包含name、url 兩種屬性。HTML中需要寫入:file-list="picArr"其中picArr就是自動添加進去的圖片（格式與手動上傳的圖片不統一，提交的時候需要再次處理）

4.將文件以formdata的形式進行發送

//發送請求
let params = new FormData()
params.append('file', file.file)
params.append('size', file.file.size)

api.submit(params)
    .then((res) => {
    this.$message.success('上傳圖片成功')
    this.feedbackImg.push(res.data)
})
    .catch((err) => {
    console.error(err)
})

鉤子

1.更改預設請求 http-request

需要將預設請求開啟 :auto-upload="true"

// 自定義上傳圖片
uploadFiles(data) {
    console.log(data)
    this.formData.fileName = data.file.name //文件名
    this.formData.fileType = 'updateNoticeFile'
    this.getBase64(data.file).then((resBase64) => {
        // 操作。。。
        this.fileList.push({
            name: this.formData.fileName,
            url: resBase64,
        })
    })
},

2.圖片上傳前 before-upload

// 上傳文件前
uploadBefore(file) {
    const isJPG =
          file.type === "image/png" ||
          file.type === "image/jpg" ||
          file.type === "image/jpeg";
    const isLt = file.size / 1024 / 1024 < 2;
    if (!isJPG) {
        this.$message.error("只能上傳.jpg/.png/.jpeg格式圖片!");
        return false;
    }
    if (!isLt) {
        this.$message.error("上傳圖片大小不能大於等於2MB!");
        return false;
    }
    return true;
},

3.發生改變之後 on-change

//發生改變後
onChange(file, fileList) {
    this.hideUpload = this.imgList.length >= this.limitCount;
    //操作...
},

4.文件上傳成功後 on-success

//上傳成功後
onSuccess(response, file, fileList, xhr) {
    this.picList = fileList;
},

利用第三個參數fileList保存當前文件列表的狀態

5.刪除成功後 on-remove

其中imgList為個人自定義添加的圖片列表，實際可用fileList替代

// 刪除成功後
onRemove(file, fileList) {
    // file = JSON.stringify(file)
    // 對應內容的索引
    Array.prototype.indexOf = function(val) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == val) return i;
        }
        return -1;
    };
    // 刪除對應索引的
    Array.prototype.remove = function(val) {
        var index = this.indexOf(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };

    if (file && file.status === "success") {
        // 刪除成功時候的方法
        this.imgList.remove(file);
        this.hideUpload = this.imgList.length >= this.limitCount;
    }
    this.picList = fileList;
},

利用第二個參數 fileList 保存文件列表的狀體

樣式

隱藏添加按鈕

根據動態增加hide類使新增圖片按鈕動態隱藏

對upload上傳文件標簽添加動態的class當圖片上傳至指定個數後將添加按鈕隱藏

:class="{ hide: hideUpload }"

// 隱藏新增的按鈕
/deep/ .hide .el-upload--picture-card {
  display: none;
}