diff --git a/ZR.Admin.WebApi/wwwroot/CodeGenTemplate/TplVue.txt b/ZR.Admin.WebApi/wwwroot/CodeGenTemplate/TplVue.txt
index 348ac51..32197e9 100644
--- a/ZR.Admin.WebApi/wwwroot/CodeGenTemplate/TplVue.txt
+++ b/ZR.Admin.WebApi/wwwroot/CodeGenTemplate/TplVue.txt
@@ -102,10 +102,6 @@ $if((item.HtmlType == "radio" || item.HtmlType == "select"))
${item.ColumnName}Options: [],
$end
$end
-$if(replaceDto.UploadFile == 1)
- //文件上传地址
- uploadUrl: process.env.VUE_APP_BASE_API + "upload/SaveFile",
-$end
$if(genTable.SortField != "")
// 是否显示编辑排序
showEditSort: false,
@@ -225,28 +221,15 @@ $if(genTable.SortField != "")
},
$end
$if(replaceDto.UploadFile == 1)
- //文件上传前判断方法
- beforeFileUpload(file) {
- const isJPG = file.type === "image/jpeg";
- const isLt2M = file.size / 1024 / 1024 < 2;
- if (!isJPG) {
- this.msgError("上传图片只能是 JPG 格式!");
- }
- if (!isLt2M) {
- this.msgError("上传图片大小不能超过 2MB!");
- }
- return isJPG && isLt2M;
+ //图片上传成功方法
+ handleUploadSuccess(res, columnName) {
+ console.log(columnName, res)
+ this.form[columnName] = res.data;
+ console.log(JSON.stringify(this.form))
},
$end
$foreach(item in genTable.Columns)
-$if((item.HtmlType == "imageUpload" || item.HtmlType == "fileUpload"))
- //${item.ColumnComment}上传成功方法
- handleUpload${item.CsharpField}Success(res, file) {
- this.form.$item.ColumnName = res.data;
- // this.form.$item.ColumnName = URL.createObjectURL(file.raw);
- // this.${refs}refs.upload.clearFiles();
- },
-$elseif((item.HtmlType == "radio" || item.HtmlType == "select") && item.DictType != "")
+$if((item.HtmlType == "radio" || item.HtmlType == "select") && item.DictType != "")
// ${item.ColumnComment}字典翻译
${item.ColumnName}Format(row, column) {
return this.selectDictLabel(this.${item.ColumnName}Options, row.${item.ColumnName});
diff --git a/ZR.CodeGenerator/CodeGenerateTemplate.cs b/ZR.CodeGenerator/CodeGenerateTemplate.cs
index 4928b61..ddb9f7e 100644
--- a/ZR.CodeGenerator/CodeGenerateTemplate.cs
+++ b/ZR.CodeGenerator/CodeGenerateTemplate.cs
@@ -104,11 +104,12 @@ namespace ZR.CodeGenerator
//图片
sb.AppendLine(" ");
sb.AppendLine($" ");
- sb.AppendLine($" ");
- sb.AppendLine($" ");
- sb.AppendLine(" ");
- sb.AppendLine(" ");
- sb.AppendLine($" ");
+ //sb.AppendLine($" ");
+ //sb.AppendLine($" ");
+ //sb.AppendLine(" ");
+ //sb.AppendLine(" ");
+ //sb.AppendLine($" ");
+ sb.AppendLine($@" ");
sb.AppendLine(" ");
sb.AppendLine(" ");
}
diff --git a/ZR.Vue/src/components/UploadImage/index.vue b/ZR.Vue/src/components/UploadImage/index.vue
index e52078e..9b41c19 100644
--- a/ZR.Vue/src/components/UploadImage/index.vue
+++ b/ZR.Vue/src/components/UploadImage/index.vue
@@ -1,18 +1,9 @@
-
-
-
+
+
+
@@ -21,27 +12,78 @@
import { getToken } from "@/utils/auth";
export default {
- components: {},
+ name: "UploadImage",
data() {
return {
- uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
+ uploadImgUrl: process.env.VUE_APP_BASE_API + this.uploadUrl, // 上传的图片服务器地址
headers: {
Authorization: "Bearer " + getToken(),
},
+ imageUrl: "",
};
},
props: {
- value: {
+ icon: {
type: String,
- default: "",
},
+ // 当前form 列名
+ column: { type: String },
+ // 上传地址
+ uploadUrl: {
+ type: String,
+ default: "Common/UploadFile",
+ },
+ // 文件类型, 例如['png', 'jpg', 'jpeg']
+ fileType: {
+ type: Array,
+ default: () => ["png", "jpg", "jpeg"],
+ },
+ // 大小限制(MB)
+ fileSize: {
+ type: Number,
+ default: 5,
+ },
+ },
+ mounted() {
+ this.imageUrl = this.icon;
},
methods: {
handleUploadSuccess(res) {
- this.$emit("input", res.url);
+ this.$emit(`handleUploadSuccess`, res, this.column);
+ this.imageUrl = res.data;
this.loading.close();
},
- handleBeforeUpload() {
+ // 上传前loading加载
+ handleBeforeUpload(file) {
+ console.log(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.msgError(
+ `文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`
+ );
+ return false;
+ }
+ if (this.fileSize) {
+ const isLt = file.size / 1024 / 1024 < this.fileSize;
+ if (!isLt) {
+ this.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
+ return false;
+ }
+ }
this.loading = this.$loading({
lock: true,
text: "上传中",
diff --git a/ZR.Vue/src/main.js b/ZR.Vue/src/main.js
index 38f615a..c16beb0 100644
--- a/ZR.Vue/src/main.js
+++ b/ZR.Vue/src/main.js
@@ -27,6 +27,8 @@ import Editor from "@/components/Editor";
import DictTag from '@/components/DictTag'
// 字典数据组件
// import DictData from '@/components/DictData'
+// 上传图片
+import UploadImage from '@/components/UploadImage/index';
// 全局方法挂载
Vue.prototype.getDicts = getDicts
@@ -56,6 +58,7 @@ Vue.component('Pagination', Pagination)
Vue.component('RightToolbar', RightToolbar)
Vue.component('DictTag', DictTag)
Vue.component('Editor', Editor)
+Vue.component('UploadImage', UploadImage)
Vue.use(permission)
Vue.use(Element, {
diff --git a/ZR.Vue/src/utils/auth.js b/ZR.Vue/src/utils/auth.js
index 6163854..b83cc6d 100644
--- a/ZR.Vue/src/utils/auth.js
+++ b/ZR.Vue/src/utils/auth.js
@@ -8,7 +8,7 @@ export function getToken() {
}
export function setToken(token) {
- console.log('set token=' + token)
+ // console.log('set token=' + token)
return Cookies.set(TokenKey, token)
}