1、Element-UI版本
"element-ui": "^2.15.9"
Upload 上傳官方文檔
2、一次只能上傳一個(gè)文件
2.1 自動(dòng)上傳
限制一次只能上傳一個(gè)文件，并判斷上傳的文件大小及文件類型；
自動(dòng)上傳：即選擇文件后即開始校驗(yàn)，校驗(yàn)通過(guò)后調(diào)接口上傳到服務(wù)器
<template>
<div class="upload-content">
<el-upload
ref="uploadFile"
drag
action="sys/file/upload"
:multiple="false"
:limit="1"
accept=".txt, .zip, .rar"
:before-upload="beforeUpload"
:on-success="uploadSuccess"
:on-error="uploadError"
:on-exceed="uploadExceed">
<i class="el-icon-upload"></i>
<div class="el-upload__text">將文件拖到此處，或<em>點(diǎn)擊上傳</em></div>
<div class="el-upload__tip" slot="tip">只能上傳txt/zip/rar文件，且不超過(guò)10M，一次只能上傳一個(gè)</div>
</el-upload>
</div>
</template>
<script>
export default {
name: 'upload-file',
data() {
return {};
},
methods: {
// 文件上傳前對(duì)文件類型、文件大小判斷限制
beforeUpload(file) {
const { name, size } = file;
const index = name.lastIndexOf('.');
// 判斷文件名是否有后綴，沒(méi)后綴文件錯(cuò)誤
if(index === -1) {
this.$notify.error({
title: '錯(cuò)誤',
message: '文件錯(cuò)誤，請(qǐng)重新上傳！',
});
return false;
}
const fileType = name.substr(index + 1);
const acceptFileTypes = ['txt', 'zip', 'rar'];
// 判斷文件類型
if(!acceptFileTypes.includes(fileType)) {
this.$notify.error({
title: '錯(cuò)誤',
message: '文件類型錯(cuò)誤，請(qǐng)重新上傳！',
});
return false;
}
// 判斷文件大小
if(size > 10*1024*1024) {
this.$notify.error({
title: '錯(cuò)誤',
message: '文件大小超過(guò)10M，請(qǐng)重新上傳！',
});
return false;
}
// 默認(rèn)true
return true;
},
// 上傳接口調(diào)取成功status為200
uploadSuccess(res) {
if(res.code === 200) { // 文件上傳成功
this.$notify.success({
title:'成功',
message: '文件上傳成功！',
});
} else {
this.uploadError();
}
},
// 文件上傳失敗
uploadError() {
this.$notify.error({
title: '錯(cuò)誤',
message: '文件上傳失敗！',
});
},
// 文件個(gè)數(shù)超過(guò)限制
uploadExceed() {
this.$notify.warning({
title:'提示',
message: '您已添加了一個(gè)文件，如需替換，請(qǐng)先刪除已添加的文件！',
});
},
}
}
</script>
<style scoped>
.upload-content {
margin: 40px auto;
width: 400px;
text-align: center;
}
</style>
2.2 手動(dòng)上傳
限制一次只能上傳一個(gè)文件，并判斷上傳的文件大小及文件類型；
手動(dòng)上傳：設(shè)置auto-upload為false。選擇文件后等待觸發(fā)上傳的動(dòng)作，比如點(diǎn)擊按鈕觸發(fā)上傳文件，會(huì)先走before-upload校驗(yàn)文件，校驗(yàn)通過(guò)后調(diào)接口上傳到服務(wù)器。
<template>
<div class="upload-content">
<el-upload
ref="uploadFile"
drag
action="sys/file/upload"
:multiple="false"
:limit="1"
accept=".txt, .zip, .rar"
:auto-upload="false"
:before-upload="beforeUpload"
:on-success="uploadSuccess"
:on-error="uploadError"
:on-exceed="uploadExceed">
<i class="el-icon-upload"></i>
<div class="el-upload__text">將文件拖到此處，或<em>點(diǎn)擊上傳</em></div>
<div class="el-upload__tip" slot="tip">只能上傳txt/zip/rar文件，且不超過(guò)10M，一次只能上傳一個(gè)</div>
</el-upload>
<div class="btn-footer">
<el-button size="small" type="primary" @click="submit">確 定</el-button>
</div>
</div>
</template>
<script>
export default {
name: 'upload-file',
data() {
return {};
},
methods: {
// 點(diǎn)擊按鈕手動(dòng)上傳，會(huì)先觸發(fā)beforeUpload，再執(zhí)行上傳
submit() {
this.$refs.uploadFile.submit();
},
// 文件上傳前對(duì)文件類型、文件大小判斷限制
beforeUpload(file) {
const { name, size } = file;
const index = name.lastIndexOf('.');
// 判斷文件名是否有后綴，沒(méi)后綴文件錯(cuò)誤
if(index === -1) {
this.$notify.error({
title: '錯(cuò)誤',
message: '文件錯(cuò)誤，請(qǐng)重新上傳！',
});
return false;
}
const fileType = name.substr(index + 1);
const acceptFileTypes = ['txt', 'zip', 'rar'];
// 判斷文件類型
if(!acceptFileTypes.includes(fileType)) {
this.$notify.error({
title: '錯(cuò)誤',
message: '文件類型錯(cuò)誤，請(qǐng)重新上傳！',
});
return false;
}
// 判斷文件大小
if(size > 10*1024*1024) {
this.$notify.error({
title: '錯(cuò)誤',
message: '文件大小超過(guò)10M，請(qǐng)重新上傳！',
});
return false;
}
// 默認(rèn)true
return true;
},
// 上傳接口調(diào)取成功status為200
uploadSuccess(res) {
if(res.code === 200) { // 文件上傳成功
this.$notify.success({
title:'成功',
message: '文件上傳成功！',
});
} else {
this.uploadError();
}
},
// 文件上傳失敗
uploadError() {
this.$notify.error({
title: '錯(cuò)誤',
message: '文件上傳失?。?,
});
},
// 文件個(gè)數(shù)超過(guò)限制
uploadExceed() {
this.$notify.warning({
title:'提示',
message: '您已添加了一個(gè)文件，如需替換，請(qǐng)先刪除已添加的文件！',
});
},
}
}
</script>
<style scoped>
.upload-content {
margin: 40px auto;
width: 400px;
text-align: center;
}
.btn-footer {
margin-top: 10px;
}
</style>
?3、一次可上傳多個(gè)文件
3.1 自動(dòng)上傳
<template>
<div class="upload-content">
<el-upload
ref="uploadFile"
drag
action="sys/file/upload"
multiple
:limit="5"
accept=".txt, .zip, .rar"
:before-upload="beforeUpload"
:on-success="uploadSuccess"
:on-error="uploadError"
:on-exceed="uploadExceed">
<i class="el-icon-upload"></i>
<div class="el-upload__text">將文件拖到此處，或<em>點(diǎn)擊上傳</em></div>
<div class="el-upload__tip" slot="tip">只能上傳txt/zip/rar文件，且不超過(guò)10M</div>
</el-upload>
</div>
</template>
<script>
export default {
name: 'upload-file',
data() {
return {};
},
methods: {
// 文件上傳前對(duì)文件類型、文件大小判斷限制
beforeUpload(file) {
const { name, size } = file;
const index = name.lastIndexOf('.');
// 判斷文件名是否有后綴，沒(méi)后綴文件錯(cuò)誤
if(index === -1) {
this.$notify.error({
title: '錯(cuò)誤',
message: `${name}文件錯(cuò)誤，請(qǐng)重新上傳！`,
});
return false;
}
const fileType = name.substr(index + 1);
const acceptFileTypes = ['txt', 'zip', 'rar'];
// 判斷文件類型
if(!acceptFileTypes.includes(fileType)) {
this.$notify.error({
title: '錯(cuò)誤',
message: `${name}文件類型錯(cuò)誤，請(qǐng)重新上傳！`,
});
return false;
}
// 判斷文件大小
if(size > 10*1024*1024) {
this.$notify.error({
title: '錯(cuò)誤',
message: `${name}文件大小超過(guò)10M，請(qǐng)重新上傳！`,
});
return false;
}
// 默認(rèn)true
return true;
},
// 上傳接口調(diào)取成功status為200
uploadSuccess(res, file) {
if(res.code === 200) { // 文件上傳成功
this.$notify.success({
title:'成功',
message: `${file.name}文件上傳成功！`,
});
} else {
this.uploadError();
}
},
// 文件上傳失敗
uploadError() {
this.$notify.error({
title: '錯(cuò)誤',
message: '文件上傳失??！',
});
},
// 文件個(gè)數(shù)超過(guò)限制
uploadExceed(files, fileList) {
this.$notify.warning({
title:'提示',
message: `當(dāng)前限制一次可選擇 5 個(gè)文件，本次選擇了 ${files.length} 個(gè)文件，共選擇了 ${files.length + fileList.length} 個(gè)文件`,
});
},
}
}
</script>
<style scoped>
.upload-content {
margin: 40px auto;
width: 400px;
text-align: center;
}
</style>
3.2 手動(dòng)上傳
<template>
<div class="upload-content">
<el-upload
ref="uploadFile"
drag
action="sys/file/upload"
multiple
:limit="5"
accept=".txt, .zip, .rar"
:auto-upload="false"
:before-upload="beforeUpload"
:on-success="uploadSuccess"
:on-error="uploadError"
:on-exceed="uploadExceed">
<i class="el-icon-upload"></i>
<div class="el-upload__text">將文件拖到此處，或<em>點(diǎn)擊上傳</em></div>
<div class="el-upload__tip" slot="tip">只能上傳txt/zip/rar文件，且不超過(guò)10M</div>
</el-upload>
<div class="btn-footer">
<el-button size="small" type="primary" @click="submit">確 定</el-button>
</div>
</div>
</template>
<script>
export default {
name: 'upload-file',
data() {
return {};
},
methods: {
// 點(diǎn)擊按鈕手動(dòng)上傳，會(huì)先觸發(fā)beforeUpload，再執(zhí)行上傳
submit() {
this.$refs.uploadFile.submit();
},
// 文件上傳前對(duì)文件類型、文件大小判斷限制
beforeUpload(file) {
const { name, size } = file;
const index = name.lastIndexOf('.');
// 判斷文件名是否有后綴，沒(méi)后綴文件錯(cuò)誤
if(index === -1) {
this.$notify.error({
title: '錯(cuò)誤',
message: `${name}文件錯(cuò)誤，請(qǐng)重新上傳！`,
});
return false;
}
const fileType = name.substr(index + 1);
const acceptFileTypes = ['txt', 'zip', 'rar'];
// 判斷文件類型
if(!acceptFileTypes.includes(fileType)) {
this.$notify.error({
title: '錯(cuò)誤',
message: `${name}文件類型錯(cuò)誤，請(qǐng)重新上傳！`,
});
return false;
}
// 判斷文件大小
if(size > 10*1024*1024) {
this.$notify.error({
title: '錯(cuò)誤',
message: `${name}文件大小超過(guò)10M，請(qǐng)重新上傳！`,
});
return false;
}
// 默認(rèn)true
return true;
},
// 上傳接口調(diào)取成功status為200
uploadSuccess(res, file) {
if(res.code === 200) { // 文件上傳成功
this.$notify.success({
title:'成功',
message: `${file.name}文件上傳成功！`,
});
} else {
this.uploadError();
}
},
// 文件上傳失敗
uploadError() {
this.$notify.error({
title: '錯(cuò)誤',
message: '文件上傳失敗！',
});
},
// 文件個(gè)數(shù)超過(guò)限制
uploadExceed(files, fileList) {
this.$notify.warning({
title:'提示',
message: `當(dāng)前限制一次可選擇 5 個(gè)文件，本次選擇了 ${files.length} 個(gè)文件，共選擇了 ${files.length + fileList.length} 個(gè)文件`,
});
},
}
}
</script>
<style scoped>
.upload-content {
margin: 40px auto;
width: 400px;
text-align: center;
}
.btn-footer {
margin-top: 10px;
}
</style>
?4、隱藏提示 “按 delete 鍵可刪除”
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-503844.html
設(shè)置樣式即可文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-503844.html
.upload-content /deep/ .el-upload-list__item .el-icon-close-tip {
display: none !important;
}到了這里，關(guān)于Element-UI的Upload 上傳文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
