重新封装上传图片组件、代码生成图片使用组件
This commit is contained in:
不做码农
parent
057aecee55
commit
1de4685ee5
@ -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});
|
||||
|
||||
@ -104,11 +104,12 @@ namespace ZR.CodeGenerator
|
||||
//图片
|
||||
sb.AppendLine(" <el-col :span=\"24\">");
|
||||
sb.AppendLine($" <el-form-item label=\"{labelName}\" :label-width=\"labelWidth\" prop=\"{columnName}\">");
|
||||
sb.AppendLine($" <el-upload class=\"avatar-uploader\" name=\"file\" :action=\"uploadUrl\" :show-file-list=\"false\" :on-success=\"handleUpload{dbFieldInfo.CsharpField}Success\" :before-upload=\"beforeFileUpload\">");
|
||||
sb.AppendLine($" <el-image v-if=\"form.{columnName}\" :src=\"form.{columnName}\" class=\"icon\"/>");
|
||||
sb.AppendLine(" <i v-else class=\"el-icon-plus uploader-icon\"></i>");
|
||||
sb.AppendLine(" </el-upload>");
|
||||
sb.AppendLine($" <el-input v-model=\"form.{columnName}\" placeholder=\"请上传文件或手动输入文件地址\"></el-input>");
|
||||
//sb.AppendLine($" <el-upload class=\"avatar-uploader\" name=\"file\" :action=\"uploadUrl\" :show-file-list=\"false\" :on-success=\"handleUpload{dbFieldInfo.CsharpField}Success\" :before-upload=\"beforeFileUpload\">");
|
||||
//sb.AppendLine($" <el-image v-if=\"form.{columnName}\" :src=\"form.{columnName}\" class=\"icon\"/>");
|
||||
//sb.AppendLine(" <i v-else class=\"el-icon-plus uploader-icon\"></i>");
|
||||
//sb.AppendLine(" </el-upload>");
|
||||
//sb.AppendLine($" <el-input v-model=\"form.{columnName}\" placeholder=\"请上传文件或手动输入文件地址\"></el-input>");
|
||||
sb.AppendLine($@" <UploadImage :icon=""form.{columnName}"" column='{columnName}' :key=""form.{columnName}"" @handleUploadSuccess=""handleUploadSuccess"" />");
|
||||
sb.AppendLine(" </el-form-item>");
|
||||
sb.AppendLine(" </el-col>");
|
||||
}
|
||||
|
||||
@ -1,18 +1,9 @@
|
||||
<template>
|
||||
<div class="component-upload-image">
|
||||
<el-upload
|
||||
:action="uploadImgUrl"
|
||||
list-type="picture-card"
|
||||
:on-success="handleUploadSuccess"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:on-error="handleUploadError"
|
||||
name="file"
|
||||
:show-file-list="false"
|
||||
:headers="headers"
|
||||
style="display: inline-block; vertical-align: top"
|
||||
>
|
||||
<el-image v-if="value" :src="value" class="avatar" />
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
<el-upload :action="uploadImgUrl" :on-success="handleUploadSuccess" :before-upload="handleBeforeUpload" :on-error="handleUploadError" name="file"
|
||||
:show-file-list="false" :headers="headers" style="display: inline-block; vertical-align: top">
|
||||
<el-image v-if="imageUrl" :src="imageUrl" class="icon" />
|
||||
<i v-else class="el-icon-plus uploader-icon"></i>
|
||||
</el-upload>
|
||||
</div>
|
||||
</template>
|
||||
@ -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: "上传中",
|
||||
|
||||
@ -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, {
|
||||
|
||||
@ -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)
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user