elementUI之upload上傳、預(yù)覽、刪除（帶確認(rèn)提示）

2025-07-18 14:47| 來(lái)源: 網(wǎng)絡(luò)整理| 查看: 265

elementUI之upload上傳、預(yù)覽、刪除（帶確認(rèn)提示）效果入下：

在這里插入圖片描述

1.el-upload的HTML部分

1） action="#"屬性用于控制【上傳地址，是必選項(xiàng)】，但是這里我們不使用，所以復(fù)制“#”。這是因?yàn)橐话阍陧?xiàng)目開(kāi)發(fā)中，我們的接口請(qǐng)求一般習(xí)慣于統(tǒng)一管理，我們會(huì)在后續(xù)的代碼中使用axios上傳。 2）accept=".pdf"屬性標(biāo)識(shí)上傳的文件類型，多個(gè)類型可用【英文逗號(hào)】分隔。 3）multiple屬性控制【可以同時(shí)傳遞多個(gè)文件】。 4）limit="3"屬性控制【最多上傳的文件數(shù)量】 5）:file-list="fileList"屬性是【上傳后的文件列表展示】 6）:auto-upload="false"屬性【阻止自動(dòng)上傳】，建議阻止自動(dòng)上傳

點(diǎn)擊上傳只能上傳PDF文件 2.JS代碼

1）上傳 on-change文件狀態(tài)改變時(shí)的鉤子，添加文件、上傳成功和上傳失敗時(shí)都會(huì)被調(diào)用

uploadCertificateChange(file) { this.$confirm("上傳文件，是否繼續(xù)？", "提示") .then(() => { this.fullscreenLoading = true; let fd = new FormData(); fd.append("files", file.raw); this.$cm .postUploadCertificate(fd) .then((res) => { console.log(res); if (res.ErrorCode == "00000000") { this.$message.success("上傳成功"); this.certificatePath = res.Response; } else { this.$message.warning(res.Message); this.fileList.pop(); } this.fullscreenLoading = false; }) .catch((err) => { this.fullscreenLoading = false; err && this.$message.warning(err); }); return true; }) .catch(() => { this.$message.success("取消成功"); this.fileList = []; return false; }); }, 2）預(yù)覽

on-preview是點(diǎn)擊文件列表中已上傳的文件時(shí)的鉤子，用于實(shí)現(xiàn)預(yù)覽

handlePreview(file) { // axios的基地址和上傳文件路徑同時(shí)存在時(shí)可預(yù)覽 if (this.$axios.defaults.baseURL && this.certificatePath) { window.open( this.$axios.defaults.baseURL + this.certificatePath, "_blank" ); } else { this.$message.warning("暫不支持預(yù)覽"); } }, 3）刪除

before-remove刪除文件之前的鉤子，參數(shù)為上傳的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，則停止刪除

beforeRemove(file, fileList) { // 移除前 return this.$confirm(`確定移除 ${file.name}？`).then(() => { this.$message.success("已移除"); this.certificatePath = ""; }); }, 4）超出規(guī)定的文件上傳個(gè)數(shù)限定

on-exceed文件超出個(gè)數(shù)限制時(shí)的鉤子

handleExceed(files, fileList) { this.$message.warning( `當(dāng)前限制選擇 3 個(gè)文件，本次選擇了 ${files.length} 個(gè)文件，已上傳了 ${fileList.length} 個(gè)文件` ); },

【本文地址】

公司簡(jiǎn)介

聯(lián)系我們

今日新聞

推薦新聞

專題文章