|
|
<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: [],
|
|
|
myHeaders:{}
|
|
|
};
|
|
|
},
|
|
|
props: ["tip", "action", "limit", "multiple", "fileUrls"],
|
|
|
mounted() {
|
|
|
this.init();
|
|
|
this.myHeaders= {
|
|
|
'Token':storage.get("Token")
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
fileUrls: function(val, oldVal) {
|
|
|
// console.log("new: %s, old: %s", val, oldVal);
|
|
|
this.init();
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
// 计算属性的 getter
|
|
|
getActionUrl: function() {
|
|
|
// return base.url + this.action + "?token=" + storage.get("token");
|
|
|
return `/${this.$base.name}/` + this.action;
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
// 初始化
|
|
|
init() {
|
|
|
// console.log(this.fileUrls);
|
|
|
if (this.fileUrls) {
|
|
|
this.fileUrlList = this.fileUrls.split(",");
|
|
|
let fileArray = [];
|
|
|
this.fileUrlList.forEach(function(item, index) {
|
|
|
var url = item;
|
|
|
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) {
|
|
|
fileList[fileList.length - 1]["url"] =
|
|
|
this.$base.url + "upload/" + file.response.file;
|
|
|
this.setFileList(fileList);
|
|
|
this.$emit("change", this.fileUrlList.join(","));
|
|
|
} 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(","));
|
|
|
},
|
|
|
// 查看大图
|
|
|
handleUploadPreview(file) {
|
|
|
this.dialogImageUrl = file.url;
|
|
|
this.dialogVisible = true;
|
|
|
},
|
|
|
// 限制图片数量
|
|
|
handleExceed(files, fileList) {
|
|
|
this.$message.warning(`最多上传${this.limit}张图片`);
|
|
|
},
|
|
|
// 重新对fileList进行赋值
|
|
|
setFileList(fileList) {
|
|
|
var fileArray = [];
|
|
|
var fileUrlArray = [];
|
|
|
// 有些图片不是公开的，所以需要携带token信息做权限校验
|
|
|
var token = storage.get("token");
|
|
|
fileList.forEach(function(item, index) {
|
|
|
var url = item.url.split("?")[0];
|
|
|
var name = item.name;
|
|
|
var file = {
|
|
|
name: name,
|
|
|
url: url + "?token=" + token
|
|
|
};
|
|
|
fileArray.push(file);
|
|
|
fileUrlArray.push(url);
|
|
|
});
|
|
|
this.fileList = fileArray;
|
|
|
this.fileUrlList = fileUrlArray;
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
</style>
|
