vue2+elementui上傳照片方式(el-upload超簡(jiǎn)單)

更新時(shí)間：2024年03月06日 09:20:26 作者：奶糖?肥晨

這篇文章主要介紹了vue2+elementui上傳照片方式(el-upload超簡(jiǎn)單),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

element上傳附件（el-upload 超詳細(xì)）

這個(gè)功能其實(shí)比較常見(jiàn)的功能，后臺(tái)管理系統(tǒng)基本上都有，這就離不開(kāi)element的el-upload

展示：

代碼展示

html代碼

 <el-upload class="upload-demo" :on-preview="handlePreview" :on-remove="handleRemove" action=""
                        :before-remove="beforeRemove" multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList"
                        :http-request="httpRequest">
                        <el-button size="small" type="primary">點(diǎn)擊上傳</el-button>
                        <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過(guò)500kb</div>
</el-upload>

data中

 fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }]

methods中

 //實(shí)現(xiàn)圖片上傳功能
        httpRequest(item) {
            // var imgId = item.file.lastModified
            console.log(item.file.name);
            this.fileList[0].name = item.file.name
            var formData = new FormData()
            formData.append('file', item.file)
            // {
            //         // 設(shè)置請(qǐng)求頭為 multipart/form-data
            //         headers: {
            //             'Content-Type': 'multipart/form-data'
            //         },
            //         // // 上傳進(jìn)度
            //         // onUploadProgress: progressEvent => {
            //         //     let percent = ((progressEvent.loaded / progressEvent.total) * 100) | 0
            //         //     //調(diào)用onProgress方法來(lái)顯示進(jìn)度條，需要傳遞個(gè)對(duì)象 percent為進(jìn)度值
            //         //     item.onProgress({ percent: percent })
            //         // }
            //     }
            upload(formData)
                .then(res => {
                    this.fileList[0].name = item.file.name
                    console.log(res);
                })
                .catch(() => { })
        },

        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`當(dāng)前限制選擇 1 個(gè)文件，本次選擇了 ${files.length} 個(gè)文件，共選擇了 ${files.length + fileList.length} 個(gè)文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`確定移除 ${file.name}？`);
        },

接口寫(xiě)法

// 上傳圖片
export function upload(data) {
  return request({
    url: '/upload',
    method: 'post',
    data,
    headers: {
      'Content-Type': 'multipart/form-data'
    },
  })
}

總結(jié)

這個(gè)功能確實(shí)是非常常見(jiàn)的，尤其在后臺(tái)管理系統(tǒng)中，文件上傳功能幾乎是標(biāo)配。而Element UI，作為一個(gè)基于 Vue 的高質(zhì)量 UI 組件庫(kù)，其 el-upload 組件提供了非常便捷的文件上傳功能。

el-upload 組件允許開(kāi)發(fā)者輕松地實(shí)現(xiàn)文件選擇、上傳、預(yù)覽以及錯(cuò)誤處理等功能。通過(guò)簡(jiǎn)單的配置和事件監(jiān)聽(tīng)，開(kāi)發(fā)者可以定制上傳按鈕的樣式、上傳進(jìn)度顯示、上傳成功或失敗后的回調(diào)函數(shù)等。此外，el-upload 還支持多種上傳方式，如拖拽上傳、多文件上傳等，極大地豐富了用戶(hù)的使用體驗(yàn)。

在后臺(tái)管理系統(tǒng)中，文件上傳功能通常與表單管理、用戶(hù)管理等模塊緊密結(jié)合。

例如，管理員可能需要上傳用戶(hù)頭像、更新系統(tǒng)配置文件、導(dǎo)入導(dǎo)出數(shù)據(jù)等。在這些場(chǎng)景中，el-upload 組件都能夠發(fā)揮出其強(qiáng)大的作用。

除了基本的文件上傳功能外，開(kāi)發(fā)者還可以結(jié)合后端接口，實(shí)現(xiàn)更加復(fù)雜的文件處理邏輯，如文件校驗(yàn)、斷點(diǎn)續(xù)傳、文件加密等。這些高級(jí)功能可以進(jìn)一步提升文件上傳的效率和安全性，滿(mǎn)足各種復(fù)雜的業(yè)務(wù)需求。

el-upload 組件作為 Element UI 中的一個(gè)重要組件，為開(kāi)發(fā)者提供了便捷、高效的文件上傳解決方案。無(wú)論是在后臺(tái)管理系統(tǒng)中，還是在其他需要文件上傳功能的場(chǎng)景中，它都能夠發(fā)揮出其獨(dú)特的優(yōu)勢(shì)，幫助開(kāi)發(fā)者快速構(gòu)建出穩(wěn)定、可靠的文件上傳功能。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: