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

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

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

element上傳附件（el-upload 超詳細）

這個功能其實比較常見的功能，后臺管理系統基本上都有，這就離不開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">點擊上傳</el-button>
                        <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過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中

 //實現圖片上傳功能
        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)
            // {
            //         // 設置請求頭為 multipart/form-data
            //         headers: {
            //             'Content-Type': 'multipart/form-data'
            //         },
            //         // // 上傳進度
            //         // onUploadProgress: progressEvent => {
            //         //     let percent = ((progressEvent.loaded / progressEvent.total) * 100) | 0
            //         //     //調用onProgress方法來顯示進度條，需要傳遞個對象 percent為進度值
            //         //     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(`當前限制選擇 1 個文件，本次選擇了 ${files.length} 個文件，共選擇了 ${files.length + fileList.length} 個文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`確定移除 ${file.name}？`);
        },

接口寫法

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

總結

這個功能確實是非常常見的，尤其在后臺管理系統中，文件上傳功能幾乎是標配。而Element UI，作為一個基于 Vue 的高質量 UI 組件庫，其 el-upload 組件提供了非常便捷的文件上傳功能。

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

在后臺管理系統中，文件上傳功能通常與表單管理、用戶管理等模塊緊密結合。

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

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

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

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: