<template>
|
<div class="upload-attachment">
|
<el-upload
|
ref="upload"
|
:action="uploadAction"
|
:headers="headers"
|
:file-list="fileList"
|
:auto-upload="false"
|
:multiple="true"
|
:limit="limit"
|
:accept="accept"
|
:on-exceed="handleExceed"
|
:on-change="handleFileChange"
|
:on-remove="handleFileRemove"
|
:on-success="handleUploadSuccess"
|
:on-error="handleUploadError"
|
:before-upload="beforeUpload"
|
>
|
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
|
<el-button
|
style="margin-left: 10px;"
|
size="small"
|
type="success"
|
@click="submitUpload"
|
:disabled="fileList.length === 0"
|
>
|
上传到服务器
|
</el-button>
|
<div slot="tip" class="el-upload__tip">
|
请上传 {{ accept }} 格式的文件，单个文件不超过10MB，最多可上传{{ limit }}个文件
|
</div>
|
</el-upload>
|
</div>
|
</template>
|
|
<script>
|
import { getToken } from "@/utils/auth";
|
|
export default {
|
name: "UploadAttachment",
|
props: {
|
// 文件列表
|
fileList: {
|
type: Array,
|
default: () => []
|
},
|
// 上传数量限制
|
limit: {
|
type: Number,
|
default: 10
|
},
|
// 接受的文件类型
|
accept: {
|
type: String,
|
default: ".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx"
|
},
|
// 上传地址
|
uploadUrl: {
|
type: String,
|
default: process.env.VUE_APP_BASE_API + "/common/upload"
|
}
|
},
|
data() {
|
return {
|
uploadAction: process.env.VUE_APP_BASE_API + "/common/upload",
|
headers: {
|
Authorization: "Bearer " + getToken()
|
}
|
};
|
},
|
methods: {
|
/** 文件选择变化 */
|
handleFileChange(file, fileList) {
|
this.$emit('change', fileList);
|
},
|
|
/** 文件移除 */
|
handleFileRemove(file, fileList) {
|
this.$emit('change', fileList);
|
this.$emit('remove', file);
|
},
|
|
/** 上传成功处理 */
|
handleUploadSuccess(response, file, fileList) {
|
if (response.code === 200) {
|
file.url = response.data || response.url;
|
this.$message.success('文件上传成功');
|
this.$emit('upload-success', {
|
file,
|
fileList,
|
response
|
});
|
} else {
|
this.$message.error(response.msg || '文件上传失败');
|
}
|
},
|
|
/** 上传错误处理 */
|
handleUploadError(err, file, fileList) {
|
console.error('上传失败:', err);
|
this.$message.error('文件上传失败，请重试');
|
this.$emit('upload-error', {
|
file,
|
fileList,
|
error: err
|
});
|
},
|
|
/** 上传前校验 */
|
beforeUpload(file) {
|
// 检查文件类型
|
const allowedTypes = this.accept.split(',').map(type => type.trim().toLowerCase());
|
const fileExtension = '.' + file.name.split('.').pop().toLowerCase();
|
|
if (!allowedTypes.includes(fileExtension) && !allowedTypes.includes(fileExtension.substring(1))) {
|
this.$message.error(`不支持的文件格式: ${fileExtension}`);
|
return false;
|
}
|
|
// 检查文件大小 (10MB限制)
|
const isLt10M = file.size / 1024 / 1024 < 10;
|
if (!isLt10M) {
|
this.$message.error('文件大小不能超过 10MB!');
|
return false;
|
}
|
|
return true;
|
},
|
|
/** 文件数量超出限制 */
|
handleExceed(files, fileList) {
|
this.$message.warning(`最多只能上传 ${this.limit} 个文件，当前选择了 ${files.length} 个文件`);
|
},
|
|
/** 手动提交上传 */
|
submitUpload() {
|
if (this.fileList.length === 0) {
|
this.$message.warning('请先选择要上传的文件');
|
return;
|
}
|
|
this.$refs.upload.submit();
|
},
|
|
/** 清空文件列表 */
|
clearFiles() {
|
this.$refs.upload.clearFiles();
|
},
|
|
/** 获取当前文件列表 */
|
getFileList() {
|
return this.fileList;
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.upload-attachment {
|
width: 100%;
|
}
|
|
::v-deep .el-upload {
|
display: block;
|
}
|
|
::v-deep .el-upload__tip {
|
margin-top: 8px;
|
font-size: 12px;
|
color: #909399;
|
}
|
</style>
|
