el-upload はアップロード フォルダー (バッチ アップロード ファイル) を実装します。キー コードは次のとおりです。
this.$refs.uploadFolder.$children[0].$refs.input.webkitdirectory = true;//el-upload にアップロード フォルダーをサポートさせます
特性：
- フォルダー内のすべてのファイルのバッチアップロードをサポート
- アップロードの中断と中止をサポート
- 不正な読み込みアニメーション効果をサポート (実際のアップロードが完了するまで 1% ～ 99% が読み込まれ、自動的に 100% になります)
- アップロード ポップアップ ウィンドウを呼び出すボタン トリガー click() をサポート (作成する el-upload ノードの数を減らすのに役立ち、1 つの el-upload コンポーネントを複数の場所で使用できるようになります)
<template>
<div class="sg-body">
<el-upload
ref="uploadFolder"
:show-file-list="false"
:headers="headers"
:accept="accept"
:action="actionURL"
:before-upload="beforeUpload"
:on-success="uploadSuccess"
:on-error="uploadError"
:on-exceed="exceed"
multiple
/>
<el-button type="primary" @click="uploadBtn.click()">点击上传文件夹</el-button>
<!-- 上传托盘（右下角） -->
<sgUploadTray v-model="showUploadTray" :data="uploadList" @stopUpload="stopUpload" />
</div>
</template>
<script>
import sgUploadTray from "@/vue/components/admin/sgUploadTray";
export default {
components: {
sgUploadTray,
},
data() {
return {
//上传相关变量----------------------------------------
headers: { kkToken: localStorage.token, }, //获取token(注意仔细看后端接受token的字段名是不是叫做“token”)
accept:`.${["png", "jpg", "jpeg", "bmp", "gif"].join(",.")}`,//允许上传的后缀名
actionURL: `${this.$d.API_ROOT_URL}/customer/importCustomerData`,
dur: 100,
percent: 100,
uploadBtn: null,//上传按钮
uploadList: [],
showUploadTray: false,
// ----------------------------------------
}
},
mounted(d) {
this.$nextTick(() => {
this.uploadBtn = this.$refs.uploadFolder.$children[0].$refs.input;
this.uploadBtn.webkitdirectory = true;//让el-upload支持上传文件夹
})
},
methods: {
// 上传文件----------------------------------------------------------------
showFakeLoading(file) {
file = this.uploadList.find(v => v.uid == file.uid);
clearInterval(file.interval);
file.percent = 0;
file.interval = setInterval(() => {
file.percent++;
file.percent >= 99 && this.hideFakeLoading(file);
}, this.dur);
},
hideFakeLoading(file, { type, tip, color } = {}) {
file = this.uploadList.find(v => v.uid == file.uid);
clearInterval(file.interval);
switch (type) {
case 'error':
file.percent = 0;
break;
case 'success':
default:
file.percent = 100;
}
type && (file.type = type);
tip && (file.tip = tip);
color && (file.color = color);
},
exceed(file, fileList) {
this.$message.error("上传文件数量太大，分散上传吧！");
},
stopUpload(d) {
this.$refs.uploadFolder.abort();
//console.log(`取消上传`, d);
},
//文件上传之前
beforeUpload(file, id) {
this.uploadList.unshift({
interval: false,
uid: file.uid,
percent: 0,//加载进度
name: file.name,
size: file.size,
type: file.type,
webkitRelativePath: file.webkitRelativePath,
type: '',
tip: '',
color: '',
});
this.showUploadTray = true;
// 判断是不是特定的格式________________________
let isFile = this.accept.includes(file.name.toLocaleLowerCase().split(".").pop());
const maxSize = 50; //限制大小
const isAllowSize = file.size / 1024 / 1024 <= maxSize;
isFile || this.$message.error("上传文件只能是" + this.accept+ "格式");
isAllowSize || this.$message.error("上传文件大小不能超过" + maxSize + "MB");
let allowUpload = isFile && isAllowSize;
allowUpload ? this.showFakeLoading(file) : this.hideFakeLoading(file, { type: 'error', tip: "上传失败", color: "red" });
return allowUpload; //若返回false则停止上传
},
//上传成功
uploadSuccess(response, file, fileList) {
if (response.data && response.data.key) {
// 下载失败原因的描述文件
this.$d.customer_downloadImportCustomerExcel({ key: response.data.key }, {
s: (d) => {
this.hideFakeLoading(file, { type: 'error', tip: "上传失败", color: "red" });
this.$g.downloadFile(d, `${file.name}-上传失败原因`, '.xls');
this.$message.error(`${file.name}-上传失败，请查看失败原因`);
// this.initList();//刷新列表
//console.log('上传失败', response, file, fileList);
}
});
} else if (response.success) {
// 上传成功了
this.hideFakeLoading(file, { type: 'success', tip: "上传成功", color: "green" });
this.$message.success(`“${file.name}上传成功`);
// this.initList();//刷新列表
//console.log('上传成功', response, file, fileList);
} else {
// 其他失败原因
this.hideFakeLoading(file, { type: 'error', tip: "上传失败", color: "red" });
this.$message.error(response.msg);
//console.log('上传失败', response, file, fileList);
}
},
//上传失败
uploadError(err, file, fileList) {
this.hideFakeLoading(file, { type: 'error', tip: "上传失败", color: "red" });
this.$message.error("上传失败");
//console.log('上传失败', err, file, fileList);
},
// ----------------------------------------
},
};
</script>
<style lang="scss" scoped>
.sg-body {
width: 100vw;
height: 100vh;
overflow: hidden;
overflow-y: auto;
}
</style>
ここで使用する sgUploadTray コンポーネントはこちら[sgUploadTray] トレイのカスタム コンポーネントをアップロードすると、アップロード リストの進行状況がリアルタイムで表示されます_最愛の強い兄貴のブログ - CSDN ブログ [sgUploadTray] トレイのカスタム コンポーネントをアップロードすると、アップロード リストの進行状況がリアルタイムで表示されます。https://blog.csdn.net/qq_37860634/article/details/131721614