@@ -23,9 +27,10 @@
请上传
+ 至多 {{ limit }} 张
大小不超过 {{ fileSize }}MB
格式为 {{ fileType.join("/") }}
- 的文件
+ 的图片
import { getToken } from "@/utils/auth";
-import { listByIds, delOss } from "@/api/system/oss";
export default {
props: {
- value: [String, Object, Array],
- // 图片数量限制
- limit: {
- type: Number,
- default: 5,
- },
- // 大小限制(MB)
- fileSize: {
- type: Number,
- default: 5,
- },
- // 文件类型, 例如['png', 'jpg', 'jpeg']
- fileType: {
- type: Array,
- default: () => ["png", "jpg", "jpeg"],
- },
+ // 图片地址 url1,url2,...
+ value: String,
+ // 是否允许同时上传多个文件
+ multipleUpload: { type: Boolean, default: false },
// 是否显示提示
- isShowTip: {
- type: Boolean,
- default: true
- }
+ isShowTip: { type: Boolean, default: true },
+ // 图片数量限制
+ limit: { type: Number, default: 5 },
+ // 大小限制(MB)
+ fileSize: { type: Number, default: 5 },
+ // 文件类型, 例如['png', 'jpg', 'jpeg']
+ fileType: { type: Array, default: () => ["png", "jpg", "jpeg"] },
},
data() {
return {
+ uploadImgUrl: process.env.VUE_APP_BASE_API + "/system/oss/addPartsUpload", // 上传的图片服务器地址
+ headers: { Authorization: "Bearer " + getToken() },
number: 0,
uploadList: [],
+
dialogImageUrl: "",
dialogVisible: false,
- hideUpload: false,
- baseUrl: process.env.VUE_APP_BASE_API,
- uploadImgUrl: process.env.VUE_APP_BASE_API + "/system/oss/addPartsUpload", // 上传的图片服务器地址
- headers: {
- Authorization: "Bearer " + getToken(),
- },
- fileList: []
};
},
- watch: {
- value: {
- async handler(val) {
- if (val) {
- // 首先将值转为数组
- let list;
- if (Array.isArray(val)) {
- list = val;
- } else {
- await listByIds(val).then(res => {
- list = res.data;
- })
- }
- // 然后将数组转为对象数组
- this.fileList = list.map(item => {
- // 此处name使用ossId 防止删除出现重名
- item = { name: item.ossId, url: item.url, ossId: item.ossId };
- return item;
- });
- } else {
- this.fileList = [];
- return [];
- }
- },
- deep: true,
- immediate: true
- }
- },
computed: {
+ fileList () {
+ return (this.value ? this.value.split(',') : []).map(url => {
+ return {
+ url: process.env.VUE_APP_IMAGE_PREVIEW_API + '/' + url.split('/').pop(),
+ name: url,
+ };
+ });
+ },
// 是否显示提示
showTip() {
- return this.isShowTip && (this.fileType || this.fileSize);
+ return this.isShowTip && (this.limit || this.fileType || this.fileSize);
},
},
methods: {
- // 上传前loading加载
- handleBeforeUpload(file) {
- let isImg = false;
- if (this.fileType.length) {
- let fileExtension = "";
- if (file.name.lastIndexOf(".") > -1) {
- fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
- }
- isImg = this.fileType.some((type) => {
- if (file.type.indexOf(type) > -1) return true;
- if (fileExtension && fileExtension.indexOf(type) > -1) return true;
- return false;
- });
- } else {
- isImg = file.type.indexOf("image") > -1;
- }
-
- if (!isImg) {
- this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
- return false;
- }
- if (this.fileSize) {
- const isLt = file.size / 1024 / 1024 < this.fileSize;
- if (!isLt) {
- this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
- return false;
- }
- }
- this.$modal.loading("正在上传图片，请稍候...");
- this.number++;
- },
// 文件个数超出
handleExceed() {
this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
},
- // 上传成功回调
- handleUploadSuccess(res, file) {
- if (res.code === 200) {
- this.uploadList.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId });
- this.uploadedSuccessfully();
- } else {
- this.number--;
- this.$modal.closeLoading();
- this.$modal.msgError(res.msg);
- this.$refs.imageUpload.handleRemove(file);
- this.uploadedSuccessfully();
+
+ // 上传前的校验
+ handleBeforeUpload(file) {
+ // 校验文件格式
+ let isImg = file.type.includes("image");
+ if (this.fileType.length) {
+ let fileExtension = file.name.includes('.') ? file.name.split('.').pop() : '';
+ isImg = this.fileType.some((type) => fileExtension.includes(type) || file.type.includes(type));
}
+ if (!isImg) {
+ this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
+ return false;
+ }
+ // 校验文件大小
+ if (this.fileSize && file.size / 1024 / 1024 > this.fileSize) {
+ this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
+ return false;
+ }
+ this.$modal.loading("正在上传图片，请稍候...");
},
- // 删除图片
- handleDelete(file) {
- const findex = this.fileList.map(f => f.name).indexOf(file.name);
- if(findex > -1) {
- let ossId = this.fileList[findex].ossId;
- delOss(ossId);
- this.fileList.splice(findex, 1);
- this.$emit("input", this.listToString(this.fileList));
+ // 上传成功回调
+ handleUploadSuccess(res) {
+ if (res.code === 200) {
+ this.$emit('input', (this.value || '') + (this.value ? ',' : '') + res.data.url);
+ } else {
+ this.$modal.msgError(res.msg);
}
+ this.$modal.closeLoading();
},
// 上传失败
handleUploadError(res) {
this.$modal.msgError("上传图片失败，请重试");
this.$modal.closeLoading();
},
- // 上传结束处理
- uploadedSuccessfully() {
- if (this.number > 0 && this.uploadList.length === this.number) {
- this.fileList = this.fileList.concat(this.uploadList);
- this.uploadList = [];
- this.number = 0;
- this.$emit("input", this.listToString(this.fileList));
- this.$modal.closeLoading();
- }
+
+ // 删除图片
+ handleDelete(file) {
+ const current = this.value.split(',');
+ const targetIndex = current.findIndex(f => f === file.name);
+ current.splice(targetIndex, 1);
+ this.$emit('input', current.join(','));
},
// 预览
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
- // 对象转成指定字符串分隔
- listToString(list, separator) {
- let strs = "";
- separator = separator || ",";
- for (let i in list) {
- if (list[i].ossId) {
- strs += list[i].ossId + separator;
- }
- }
- return strs != "" ? strs.substr(0, strs.length - 1) : "";
- }
- }
+ },
};
diff --git a/ruoyi-ui/vue.config.js b/ruoyi-ui/vue.config.js
index 69e96c3..6e0723a 100644
--- a/ruoyi-ui/vue.config.js
+++ b/ruoyi-ui/vue.config.js
@@ -35,12 +35,19 @@ module.exports = {
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
- target: `http://localhost:8081`,
+ target: process.env.VUE_APP_API_TARGET_URL,
+ changeOrigin: true,
+ // pathRewrite: {
+ // ['^' + process.env.VUE_APP_BASE_API]: ''
+ // }
+ },
+ '/imagePreview': {
+ target: 'http://47.121.27.78:8008',
changeOrigin: true,
pathRewrite: {
- ['^' + process.env.VUE_APP_BASE_API]: ''
- }
- }
+ '^/imagePreview': '',
+ },
+ },
},
disableHostCheck: true
},