sgUploadList源码
<template><div :class="$options.name"><ul class="files"><li v-for="(a, i) in files" :key="i"><sgFileLink :data="a" @remove="remove(a, i)" clearable /></li></ul><el-uploadv-if="!disabled"ref="upload":accept="accept":action="'#'":auto-upload="false":disabled="disabled":multiple="true":on-change="change":show-file-list="false"><el-button slot="trigger" type="primary" icon="el-icon-upload2">上传文件</el-button><el-alertv-if="alertMsg !== false"style="margin-top: 10px":closable="true":close-text="``":description="``":effect="'light'":show-icon="true":title="alertMsg || `最多可上传${limit}个附件,每个附件大小不超过${maxSize}M`":type="'warning'"/></el-upload><el-image ref="image" style="display: none" src="" :preview-src-list="[previewSrc]" /></div>
</template>
<script>
import sgFileLink from "@/vue/components/admin/sgFileLink";
export default {name: "sgUploadList",components: { sgFileLink },data() {return {suffixIconURLs: this.$global.resourceTypes.flatMap((v) => v.suffixIconURLs),accept: `*`,form: {}, //表单信息uploadBtn: null, //上传触发按钮disabled: false, //是否只读alertMsg: ``, //如果为false就隐藏提示内容limit: 10,maxSize: 100,files: [],previewSrc: null,};},props: ["data"],watch: {data: {handler(newValue, oldValue) {// console.log(`深度监听${this.$options.name}：`, newValue, oldValue);if (Object.keys(newValue || {}).length) {this.form = JSON.parse(JSON.stringify(newValue));} else {this.form = {};}this.form = JSON.parse(JSON.stringify(newValue));this.disabled = this.form.disabled;this.alertMsg = this.form.alertMsg;// 获取外部回显上传列表----------------------------------------let files =typeof this.form.files === `string`? JSON.parse(this.form.files || "[]"): this.form.files || [];Array.isArray(files) || (files = [files]);this.files = files;// ----------------------------------------this.form.accept && (this.accept = this.form.accept);this.form.limit && (this.limit = this.form.limit);this.form.maxSize && (this.maxSize = this.form.maxSize);this.$nextTick(() => {this.uploadBtn = this.$refs.upload.$children[0].$refs.input;this.uploadBtn.webkitdirectory = this.form.webkitdirectory; //让el-upload支持上传文件夹});},deep: true, //深度监听immediate: true, //立即执行},},methods: {change(file) {if (this.files.length >= this.limit) {this.$message(`最多只能上传${this.limit}个文件`);} else {let fileSizeMB = file.size / 1024 / 1024; //转换文件大小（单位MB）if (this.maxSize && fileSizeMB > this.maxSize) {this.$message(`“${file.name}”文件大小超过${this.$g.getSize(this.maxSize * 1024 * 1024)}`);} else {this.files.push(file.raw);this.$emit(`change`, { files: this.files });}}},remove(d, i) {this.files.splice(i, 1);this.$emit(`change`, { files: this.files });},getSuffixByFileName(name) {return name.split(".").slice(-1)[0];},getFileTypeBySuffix(suffix) {return (this.$global.resourceTypes.find((v) => v.suffixs.includes(suffix)) || {}).type;},// 获取文件格式图片路径getFlieThumbSrc(d) {let rpnull = `~@/../static/img/fileType/other/rpnull.svg`;if (d) {typeof d === `string` && (d = JSON.parse(d));if (Object.keys(d || {}).length) {return this.suffixIconURLs.find((v) =>v.includes(`/${this.getSuffixByFileName(d.name)}.`));} else return rpnull;} else return rpnull;},showImage(previewSrc) {this.previewSrc = previewSrc;this.$refs.image.showViewer = true; //显示大图},clickFile(d) {let isImage = false;if (d.fileURL) {isImage =this.getFileTypeBySuffix(this.getSuffixByFileName(d.name)) === `picture`;isImage ? this.showImage(d) : window.open(`${d.fileURL}`, "_blank");} else {isImage = d.type.includes(`image`);isImage? this.$g.file2Base64Image(d, (d) => this.showImage(d)): this.$g.downloadByFileObject(d);}},},
};
</script>
<style lang="scss" scoped>
.sgUploadList {.files {li {margin-bottom: 10px;line-height: normal;width: max-content;max-width: 100%;}}.el-alert {line-height: normal;}
}
</style>
应用
<sgUploadList:data="{files: convertBackendFiles(form.FILE_INFO_LIST || []),disabled: disabled_,limit: 10,}"@change="getUploadFiles"
/>...getUploadFiles({ files }) {console.log(`获取上传文件：`, files);
},
基于基础的el-upload组件使用基于elementUI的el-upload的上传文件对象获取代码片段，支持上传单个、多个File或文件夹(可以获取文件夹下钻子文件夹递归文件)-CSDN博客文章浏览阅读192次。【代码】【sgUploadList】自定义组件：基于elementUI的el-upload封装的上传列表组件，适用于上传附件时。【sgUploadList】自定义组件：基于elementUI的el-upload封装的上传列表组件，适用于上传附件时-CSDN博客。
https://blog.csdn.net/qq_37860634/article/details/144338242
基于自定义sgFileLink组件【sgFileLink】自定义组件：基于el-link、el-icon标签构建文件超链接组件，支持垃圾桶删除、点击预览视频/音频/图片/PDF格式文件-CSDN博客文章浏览阅读29次。【代码】【sgFileLink】自定义组件：基于el-link、el-icon标签构建文件超链接组件，支持垃圾桶删除、点击预览视频/音频/图片/PDF格式文件。https://blog.csdn.net/qq_37860634/article/details/144376291
