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

来源:https://www.cnblogs.com/ommggg/archive/2023/01/13/17049677.html
-Advertisement-
Play Games

upload上傳組件的使用方法 上傳圖片後自動上傳(也可以手動上傳),圖片上傳成功後由後端返回特定圖片地址,在表單提交後將表單數據同圖片地址一併返回即可完成圖片上傳功能。 組件HTML <!-- 上傳圖片 --> <div style="margin: 4px 0">圖片上傳(僅支持jpg、png格 ...


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

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Day1 選擇 595. 大的國家 World表: + + + | Column Name | Type | + + + | name | varchar | | continent | varchar | | area | int | | population | int | | gdp | in ...
  • 如果入職一些中小型公司,往往需要接手一些很“坑”的項目,到底多坑就不牢騷了,只講一下,如果破解這些歷史遺留的項目問題。項目代碼可能短時間無法進行通讀研究,我們就需要從底層資料庫進行挖掘問題,有經驗的老開發工程師,他會開啟Sql Server Profiler 這個功能,進行語句的跟蹤。這個是一個很好 ...
  • 對於一個集中式緩存的分散式能力構建,必須要額外提供一些機制,來保障數據在各個節點上的安全與一致性。本文以Redis為代表,看下集Redis面對上述問題交出的是怎樣一份答卷。 ...
  • 一、系統性能問題五大特性 二、系統性能排查方略 三、MySQL開發規範和常見調優策略 四、MySQL性能管控體系 五、未來展望 ...
  • 安裝 wavesurfer.js 在項目中安裝 wavesurfer.js npm install --save wavesurfer.js 常規方式引入 如果你的根目錄中沒有 components 目錄則需要創建該目錄,併在此目錄中創建 WaveSurfer.vue 內容如下: <template ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 性能優化一直是前端研究的主要課題之一,因為不僅直接影響用戶體驗,對於商業性公司,網頁性能的優劣更關乎流量變現效率的高低。例如 DoubleClick by Google 發現: 如果頁面載入時間超過 3 秒,53% 的用戶會選擇終止當前操 ...
  • 二分查找(Binary Search)是一種在有序數組中查找目標元素的查找演算法。它的基本思路是:在數組的中間元素開始,如果該元素等於目標元素,則查找成功;如果該元素大於目標元素,則在左半部分繼續查找;如果該元素小於目標元素,則在右半部分繼續查找。這樣一直重覆這個過程,直到查找成功或者查找失敗。 ...
  • 摘要:讓我們看一個示例,展示在記憶體消耗方面,採用流的編程思路帶來的巨大優越性。 本文分享自華為雲社區《使用 Node.js Stream API 減少伺服器端記憶體消耗的一個具體例子》,作者:Jerry Wang 。 HTTP 響應對象(上面代碼中的 res)也是一個可寫流。這意味著如果我們有一個表示 ...
一周排行
    -Advertisement-
    Play Games
  • 下麵是一個標準的IDistributedCache用例: public class SomeService(IDistributedCache cache) { public async Task<SomeInformation> GetSomeInformationAsync (string na ...
  • 這個庫提供了在啟動期間實例化已註冊的單例,而不是在首次使用它時實例化。 單例通常在首次使用時創建,這可能會導致響應傳入請求的延遲高於平時。在註冊時創建實例有助於防止第一次Request請求的SLA 以往我們要在註冊的時候實例單例可能會這樣寫: //註冊: services.AddSingleton< ...
  • 最近公司的很多項目都要改單點登錄了,不過大部分都還沒敲定,目前立刻要做的就只有一個比較老的項目 先改一個試試手,主要目標就是最短最快實現功能 首先因為要保留原登錄方式,所以頁面上的改動就是在原來登錄頁面下加一個SSO登錄入口 用超鏈接寫的入口,頁面改造後如下圖: 其中超鏈接的 href="Staff ...
  • Like運算符很好用,特別是它所提供的其中*、?這兩種通配符,在Windows文件系統和各類項目中運用非常廣泛。 但Like運算符僅在VB中支持,在C#中,如何實現呢? 以下是關於LikeString的四種實現方式,其中第四種為Regex正則表達式實現,且在.NET Standard 2.0及以上平... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他們的程式記憶體會偶發性暴漲,自己分析了下是非托管記憶體問題,讓我幫忙看下怎麼回事?哈哈,看到這個dump我還是非常有興趣的,居然還有這種游戲幣自助機類型的程式,下次去大玩家看看他們出幣的機器後端是不是C#寫的?由於dump是linux上的程式,剛好win ...
  • 前言 大家好,我是老馬。很高興遇到你。 我們為 java 開發者實現了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何處理的,可以參考我的另一個項目: 手寫從零實現簡易版 tomcat minicat 手寫 ngin ...
  • 上一次的介紹,主要圍繞如何統一去捕獲異常,以及為每一種異常添加自己的Mapper實現,並且我們知道,當在ExceptionMapper中返回非200的Response,不支持application/json的響應類型,而是寫死的text/plain類型。 Filter為二方包異常手動捕獲 參考:ht ...
  • 大家好,我是R哥。 今天分享一個爽飛了的面試輔導 case: 這個杭州兄弟空窗期 1 個月+,面試了 6 家公司 0 Offer,不知道問題出在哪,難道是杭州的 IT 崩盤了麽? 報名面試輔導後,經過一個多月的輔導打磨,現在成功入職某上市公司,漲薪 30%+,955 工作制,不咋加班,還不捲。 其他 ...
  • 引入依賴 <!--Freemarker wls--> <dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.30</version> </dependency> ...
  • 你應如何運行程式 互動式命令模式 開始一個互動式會話 一般是在操作系統命令行下輸入python,且不帶任何參數 系統路徑 如果沒有設置系統的PATH環境變數來包括Python的安裝路徑,可能需要機器上Python可執行文件的完整路徑來代替python 運行的位置:代碼位置 不要輸入的內容:提示符和註 ...