html:
<!-- multiple(單次多個上傳時添加) : 每次上傳多個文件時,打開 。配合 limit 屬性使用:每次可上傳文件的最大數(shù)量-->
<el-upload ref="upload" :limit="1" accept=".pdf" :headers="upload.headers" :action="upload.url +upload.id "
:disabled="upload.isUploading" :on-change="changeUpload" :on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess" :on-error='handleFileError' :auto-upload="false" drag>
<i class="el-icon-upload"></i>
<div class="el-upload__text">將文件拖到此處,或<em>點(diǎn)擊上傳</em></div>
<div class="el-upload__tip txt_center" slot="tip">
<span>僅允許導(dǎo)入<b> pdf格式 </b>文件,單次只可上傳1個pdf文件</span>
</div>
</el-upload>
js:文章來源:http://www.zghlxwxcb.cn/news/detail-536556.html
import { getToken } from "@/utils/auth";
data() {
return {
// 導(dǎo)入?yún)?shù)
upload: {
// 是否顯示彈出層(導(dǎo)入)
open: false,
// 彈出層標(biāo)題(導(dǎo)入)
title: "",
// 是否禁用上傳
isUploading: false,
// 是否更新已經(jīng)存在的用戶數(shù)據(jù)
updateSupport: 0,
// 設(shè)置上傳的請求頭部
headers: {
Authorization: "Bearer " + getToken()
},
// 上傳的地址
url: process.env.VUE_APP_BASE_API + "/system/user/importData"
},
}
},
methods: {
// 只能上傳單個文件,選擇文件覆蓋原有文件
changeUpload(file, fileList) {
if (fileList.length > 1 && file.status !== "fail") {
fileList.splice(0, 1);
// 多選并上傳多個文件:
// 方法一:fileList.splice(0, n)。n:多選文件的數(shù)量。--數(shù)組從前往后順序截取。
// 方法二:fileList.splice(0, -n)。n:多選文件的數(shù)量。--數(shù)組從后往前順序截?。ūA糇钚律蟼鞯?,截去之前上傳的。--方法一反之)
} else if (file.status === "fail") {
this._err("上傳失敗,請重新上傳!");
fileList.splice(0, 1);
}
},
// 上傳文件 - 文件上傳中處理
handleFileUploadProgress(event, file, fileList) {
// multiple屬性(單次可上傳多個文件),可打開注釋部分,功能為:上傳第一個文件開始,isUploading 置為 true,到最后一個文件上傳完成,isUploading 變?yōu)?fasle。否則控制臺會報 "status" 的錯
// if (file == fileList[0]) {
this.upload.isUploading = true;
// }
},
// 上傳文件 - 文件失敗處理
handleFileError(event, file, fileList) {
// multiple屬性(單次可上傳多個文件),可打開注釋部分,功能為:上傳第一個文件開始,isUploading 置為 true,到最后一個文件上傳完成,isUploading 變?yōu)?fasle。否則控制臺會報 "status" 的錯
// if (file == fileList[0]) {
// this.upload.isUploading = false;
// }
},
// 上傳文件 - 文件上傳成功處理
handleFileSuccess(res, file, fileList) {
console.log(34, file, fileList)
if (res.code == 200) {
// multiple屬性(單次可上傳多個文件),可打開注釋部分,功能為:最后一個文件上傳完成后,清空列表。
// if (file == fileList[fileList.length - 1]) {
// 清空上傳文件列表,否則影響上傳文件數(shù)限制判斷
this.$refs.upload.clearFiles();
// }
// this._success('上傳成功')//提示語:上傳成功。根據(jù)實際情況來
this.getList() //刷新列表。根據(jù)實際情況來
} else {
// 同上
// if (file == fileList[fileList.length - 1]) {
// 清空上傳文件列表,否則影響上傳文件數(shù)限制判斷
this.$refs.upload.clearFiles();
// }
this._err(res.msg)
}
this.upload.open = false;
// 不在上面 if else 中控制,也可以放在這里。功能同上。
// if (file == fileList[fileList.length - 1]) {
// // 上傳第一個文件開始,isUploading 置為 true,到最后一個文件上傳完成,isUploading 變?yōu)?fasle。否則控制臺會報 "status" 的錯
this.upload.isUploading = false;
// }
},
// 上傳文件 - 提交上傳文件
submitFileForm() {
this.$refs.upload.submit();
},
}
auth文件:文章來源地址http://www.zghlxwxcb.cn/news/detail-536556.html
import Cookies from 'js-cookie'//需先npm install js-cookie 安裝,安裝后package.json文件中會有"js-cookie": "3.0.1"安裝版本的顯示。
const TokenKey = 'Admin-Token'
const ExpiresInKey = 'Admin-Expires-In'
// 此方法為vue文件中引入的 getToken() 方法
export function getToken() {
return Cookies.get(TokenKey)
}
export function setToken(token) {
return Cookies.set(TokenKey, token)
}
export function removeToken() {
return Cookies.remove(TokenKey)
}
export function getExpiresIn() {
return Cookies.get(ExpiresInKey) || -1
}
export function setExpiresIn(time) {
return Cookies.set(ExpiresInKey, time)
}
export function removeExpiresIn() {
return Cookies.remove(ExpiresInKey)
}
到了這里,關(guān)于el-upload 只能上傳一個文件(完整適用方法),包括:新文件替換原文件方法。的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!