<template>
|
<VolBox
|
v-model="model"
|
title="选择图片"
|
:height="228"
|
:width="500"
|
:padding="15"
|
>
|
<!-- 上传图片、excel或其他文件、文件数量、大小限制都可以，参照volupload组件api -->
|
<div style="height: 150px;">
|
<VolUpload
|
style="text-align: center; border: 1px dotted #ff9800; padding: 20px"
|
:autoUpload="false"
|
:multiple="true"
|
:url="url"
|
:max-file="2"
|
:img="true"
|
:fileInfo="fileInfo"
|
:upload-after="uploadAfter"
|
>
|
<div>选择图片,只能上传3M以内的照片</div>
|
</VolUpload>
|
</div>
|
</VolBox>
|
</template>
|
<script>
|
import { h, resolveComponent, defineAsyncComponent } from "vue";
|
export default {
|
components: {
|
VolUpload: defineAsyncComponent(() =>
|
import("@/components/basic/VolUpload.vue")
|
),
|
VolBox: defineAsyncComponent(() => import("@/components/basic/VolBox.vue")),
|
},
|
data() {
|
return {
|
//设置保存图片的路径,此处选择的是框架自带每个表的上传的路径
|
//也可以自定义设置上传文件的接口，如果需要上传到第三方请实现uploadBefore方法
|
url: "api/Sys_Dictionary/upload",
|
fileInfo: [], //初始化一个空对象，用来存储编辑上传图片时的原始图片
|
model: false,
|
row: {}, //当前操作的明细表行
|
};
|
},
|
methods: {
|
open(fileInfo, row) {
|
this.row=row;
|
this.fileInfo = fileInfo;
|
this.model = true;
|
},
|
//上传完成，将图片写入明细表数据
|
uploadAfter(result, files) {
|
if (!result.status) return true;
|
//生成图片保存后返回的路径
|
let imgs = files.map((x) => {
|
//2021.09.25修复示例上传路径逻辑错误的问题
|
if (x.path) {
|
return x.path;
|
}
|
return result.data + x.name;
|
});
|
// //获取vue父组件(查询界面)
|
// this.$emit('parentCall',($parent)=>{
|
// })
|
//将图片通过逗号隔开，重新写入明细表的行数据中
|
this.row.Remark = imgs.join(",");
|
this.model = false;
|
return true;
|
},
|
},
|
};
|
</script>
|
