|
|
<template>
|
|
|
<div>
|
|
|
<!-- 上传文件组件 -->
|
|
|
<el-upload
|
|
|
ref="upload" <!-- 定义上传组件的引用名称 -->
|
|
|
:action="getActionUrl" <!-- 指定文件上传的目标地址 -->
|
|
|
list-type="picture-card" <!-- 设置为图片卡片样式 -->
|
|
|
:multiple="multiple" <!-- 是否支持多文件上传 -->
|
|
|
:limit="limit" <!-- 限制上传文件的数量 -->
|
|
|
:headers="myHeaders" <!-- 设置上传请求头 -->
|
|
|
:file-list="fileList" <!-- 绑定文件列表 -->
|
|
|
:on-exceed="handleExceed" <!-- 超出文件数量限制时的回调函数 -->
|
|
|
:on-preview="handleUploadPreview" <!-- 点击文件列表时的预览回调 -->
|
|
|
:on-remove="handleRemove" <!-- 文件移除时的回调函数 -->
|
|
|
:on-success="handleUploadSuccess" <!-- 文件上传成功时的回调函数 -->
|
|
|
:on-error="handleUploadErr" <!-- 文件上传失败时的回调函数 -->
|
|
|
:before-upload="handleBeforeUpload" <!-- 文件上传前的钩子函数 -->
|
|
|
>
|
|
|
<i class="el-icon-plus"></i> <!-- 显示上传按钮图标 -->
|
|
|
<div slot="tip" class="el-upload__tip" style="color:#838fa1;">{{tip}}</div> <!-- 提示文字 -->
|
|
|
</el-upload>
|
|
|
<!-- 查看大图的对话框 -->
|
|
|
<el-dialog :visible.sync="dialogVisible" size="tiny" append-to-body>
|
|
|
<img width="100%" :src="dialogImageUrl" alt> <!-- 显示大图 -->
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import storage from "@/utils/storage"; // 导入存储工具类
|
|
|
import base from "@/utils/base"; // 导入基础配置工具类
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
// 查看大图的对话框是否可见
|
|
|
dialogVisible: false,
|
|
|
// 查看大图的图片地址
|
|
|
dialogImageUrl: "",
|
|
|
// 组件渲染图片的数组字段，有特殊格式要求
|
|
|
fileList: [],
|
|
|
fileUrlList: [], // 存储文件 URL 的数组
|
|
|
myHeaders:{} // 上传请求头对象
|
|
|
};
|
|
|
},
|
|
|
props: ["tip", "action", "limit", "multiple", "fileUrls"], // 定义组件接收的属性
|
|
|
mounted() {
|
|
|
this.init(); // 初始化组件数据
|
|
|
this.myHeaders= {
|
|
|
'Token':storage.get("Token") // 设置上传请求头中的 Token
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
fileUrls: function(val, oldVal) {
|
|
|
// 监听 fileUrls 属性变化，重新初始化数据
|
|
|
this.init();
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
// 计算属性，动态生成上传地址
|
|
|
getActionUrl: function() {
|
|
|
// return base.url + this.action + "?token=" + storage.get("token");
|
|
|
return `/${this.$base.name}/` + this.action; // 拼接上传地址
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
// 初始化方法
|
|
|
init() {
|
|
|
// 如果传入了 fileUrls，则解析并设置文件列表
|
|
|
if (this.fileUrls) {
|
|
|
this.fileUrlList = this.fileUrls.split(","); // 将字符串分割为数组
|
|
|
let fileArray = [];
|
|
|
this.fileUrlList.forEach(function(item, index) {
|
|
|
var url = item; // 获取文件 URL
|
|
|
var name = index; // 使用索引作为文件名
|
|
|
var file = {
|
|
|
name: name,
|
|
|
url: url
|
|
|
};
|
|
|
fileArray.push(file); // 将文件对象添加到数组中
|
|
|
});
|
|
|
this.setFileList(fileArray); // 设置文件列表
|
|
|
}
|
|
|
},
|
|
|
handleBeforeUpload(file) {
|
|
|
// 文件上传前的处理逻辑（暂未实现）
|
|
|
},
|
|
|
// 上传文件成功后执行
|
|
|
handleUploadSuccess(res, file, fileList) {
|
|
|
if (res && res.code === 0) {
|
|
|
// 如果上传成功，更新文件列表中的 URL
|
|
|
fileList[fileList.length - 1]["url"] =
|
|
|
this.$base.url + "upload/" + file.response.file;
|
|
|
this.setFileList(fileList); // 更新文件列表
|
|
|
this.$emit("change", this.fileUrlList.join(",")); // 触发父组件的 change 事件
|
|
|
} else {
|
|
|
this.$message.error(res.msg); // 提示上传失败信息
|
|
|
}
|
|
|
},
|
|
|
// 图片上传失败
|
|
|
handleUploadErr(err, file, fileList) {
|
|
|
this.$message.error("文件上传失败"); // 提示用户上传失败
|
|
|
},
|
|
|
// 移除图片
|
|
|
handleRemove(file, fileList) {
|
|
|
this.setFileList(fileList); // 更新文件列表
|
|
|
this.$emit("change", this.fileUrlList.join(",")); // 触发父组件的 change 事件
|
|
|
},
|
|
|
// 查看大图
|
|
|
handleUploadPreview(file) {
|
|
|
this.dialogImageUrl = file.url; // 设置大图的 URL
|
|
|
this.dialogVisible = true; // 显示大图对话框
|
|
|
},
|
|
|
// 限制图片数量
|
|
|
handleExceed(files, fileList) {
|
|
|
this.$message.warning(`最多上传${this.limit}张图片`); // 提示用户超出数量限制
|
|
|
},
|
|
|
// 重新对 fileList 进行赋值
|
|
|
setFileList(fileList) {
|
|
|
var fileArray = []; // 用于存储新的文件列表
|
|
|
var fileUrlArray = []; // 用于存储新的文件 URL 列表
|
|
|
// 有些图片不是公开的，所以需要携带 token 信息做权限校验
|
|
|
var token = storage.get("token");
|
|
|
fileList.forEach(function(item, index) {
|
|
|
var url = item.url.split("?")[0]; // 去掉 URL 中的参数部分
|
|
|
var name = item.name; // 获取文件名
|
|
|
var file = {
|
|
|
name: name,
|
|
|
url: url + "?token=" + token // 添加 token 参数
|
|
|
};
|
|
|
fileArray.push(file); // 将文件对象添加到数组中
|
|
|
fileUrlArray.push(url); // 将 URL 添加到数组中
|
|
|
});
|
|
|
this.fileList = fileArray; // 更新文件列表
|
|
|
this.fileUrlList = fileUrlArray; // 更新文件 URL 列表
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
</style>
|
