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

朝顏淺語發表於2023-01-13
元件

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;
}

相關文章