avue强大的upload表单项内置方法的使用，用这个可以配合$DialogForm.show()弹框完美使用上传控件
avue强大的upload表单项内置方法的使用，可以配合$DialogForm.show()弹框完美使用上传控件，支持非标准化后端返回数据
upload可使用的内置方法
uploadAfter()
uploadBefore()
uploadDelete()
uploadError()
uploadExceed()
uploadPreview()
可以用cangechange: ({ value, column, item, dic }) 事件把表单项的内置方法
change: ({ value, column, item, dic }) => {
// obj.$message.success("change事件查看控制台");
console.log("值改变", value, column, item, dic);
},
column 对象如下所示
后端不是按标准的 mame和url返回数据时，需要配置
propsHttp: {
url: "attachPath",
name: "originalName",
res: "data",
},
当dataType: “object”,时，点提交时有更多的数据，数据默认是name和url，如果想改成其他
props: {
label: "originalName",
value: "attachPath",
},
如果保存数据时需要更多的数据，可以用
uploadAfter: (res, done, loading, column) => {
obj.$message.success("上传后事件，数据请看控制台");
console.log("res:", res, "column:", column);
done();
},
- res中包含所有上传服务器返回的数据，如上图的res
上传后端代码
<?php
/*
* @Description:
* @Version: 1.0
* @Autor: Tj
* @Date: 2023-03-22 16:39:49
*/
header("Access-Control-Allow-Origin:*");
header("Content-type:application/json");
$data["data"] = [
"originalName" => "d8b52e565ad93b692ecccc24ebff7b89.jpg",
"attachPath" => "https://api.avuejs.com/imgview/d8b52e565ad93b692ecccc24ebff7b89.jpg",
"attachId" => "1234567890"
];
echo json_encode($data);
完整代码
AvueDialogFormCTRView.vue
<!--
* @Description:
* @Version: 1.0
* @Autor: Tj
* @Date: 2023-03-17 09:40:03
-->
<template>
<div>
<div>
<el-button type="primary" @click="showDialog">
弹窗表单（字段联动，初始化约束）</el-button
>
</div>
<el-dialog
title="预览"
v-dialogDrag
:visible.sync="previewImageFlag"
class="avue-dialog"
width="85%"
top="10px"
>
<el-link :href="previewImageUrl" target="_blank">
<el-image :src="previewImageUrl"></el-image
></el-link>
<div class="avue-dialog__footer">
<el-button @click="previewImageFlag = false" size="small" type=""
>关 闭</el-button
>
</div>
</el-dialog>
</div>
</template>
<script>
import { AvueDialogFormCTROption } from "@/options/AvueDialogFormCTRViewOption.js";
export default {
name: "DialogForm",
components: {},
data() {
return {
previewImageFlag: false,
previewImageUrl: "",
model: {
text1: "字段1数据",
text2: "字段2数据",
text3: "字段3数据",
control1: "3",
},
dicData: [
{ label: "开放1个字段", value: "1" },
{ label: "开放2个字段", value: "2" },
{ label: "开放3个字段", value: "3" },
],
};
},
methods: {
showDialog() {
this.$DialogForm.show({
title: "弹窗表单（字段联动，初始化约束）",
width: "550px",
top:"10px",
menuPosition: "right",
data: this.model, //初始数据
option: AvueDialogFormCTROption(this, this.model), //表单项
form: "form",
callback: (res) => {
console.log(res.data);
this.$message.success("关闭等待框");
setTimeout(() => {
res.done();
setTimeout(() => {
this.$message.success("关闭弹窗");
res.close();
}, 1000);
}, 1000);
},
beforeClose: (done) => {
this.$message.info("正在关闭弹窗");
done();
},
});
},
uploadBefore(file, done, loading, column) {
console.log(file, column);
//如果你想修改file文件,由于上传的file是只读文件，必须复制新的file才可以修改名字，完后赋值到done函数里,如果不修改的话直接写done()即可
var newFile = new File([file], "1234", { type: file.type });
done(newFile);
this.$message.success("上传前的方法");
},
uploadAfter(res, done, loading, column) {
console.log(res, column);
done();
this.$message.success("上传后的方法");
},
},
};
</script>
<style scoped type="scss">
.margin-top {
margin-top: 20px;
}
</style>
AvueDialogFormCTRViewOption.js
/*
* @Description:
* @Version: 1.0
* @Autor: Tj
* @Date: 2023-03-21 11:02:42
*/
export const AvueDialogFormCTROption = (obj, formData) => {
// let actionUpload = "https://api.avuejs.com/imgupload";
let actionUpload = "http://localhost/php/upload_data.php";
return {
labelWidth: 100, //整体列标签宽度
submitText: "提交修改",
span: 24,
size: "small", //medium/small/mini
column: [
{
row: true,
order: 100,
label: "控制项",
prop: "control1",
type: "select",
props: { label: "label", value: "value" },
dicData: obj.dicData,
control: (val, from) => {
if (val == 1) {
from.text2 = "";
from.text3 = "";
return {
text1: {
disabled: false,
},
text2: {
disabled: true,
},
text3: {
disabled: true,
},
};
} else if (val == 2) {
from.text3 = "";
return {
text1: {
disabled: false,
},
text2: {
disabled: false,
},
text3: {
disabled: true,
},
};
} else if (val == 3) {
return {
text1: {
disabled: false,
},
text2: {
disabled: false,
},
text3: {
disabled: false,
},
};
}
},
rules: [{ required: true, message: "请选择控制项", trigger: "blur" }],
},
{
row: true,
order: 50,
label: "字段1",
prop: "text1",
width: 120,
type: "input",
disabled: false,
value: "",
},
{
row: true,
order: 50,
label: "字段2",
prop: "text2",
width: 120,
type: "input",
disabled: formData.control1 == 2 ? true : false,
value: "",
},
{
row: true,
order: 50,
label: "字段3",
prop: "text3",
type: "textarea",
maxlength: 200,
showWordLimit: true,
minRows: 2,
maxRows: 2,
disabled:
formData.control1 == 1 || formData.control1 == 2 ? true : false,
value: "",
change: ({ value, column, item, dic }) => {
// obj.$message.success("change事件查看控制台");
// console.log("值改变", value, column, item, dic);
},
},
{
row: true,
order: 50,
label: "上传附件",
prop: "upload1",
type: "upload",
fileType: "img", //img/video/audio
accept: "image/png, image/jpeg, image/gif, image/bmp",
span: 24,
dataType: "object",
dragFile: true,
props: {
label: "originalName",
value: "attachPath",
},
propsHttp: {
url: "attachPath",
name: "originalName",
res: "data",
},
canvasOption: {
//水印
text: "avue",
ratio: 0.1,
},
action: actionUpload,
disabled: false,
change: ({ value, column, item, dic }) => {
// obj.$message.success("change事件查看控制台");
// console.log("值改变", value, column, item, dic);
},
uploadAfter: (res, done, loading, column) => {
obj.$message.success("上传后事件，数据请看控制台");
console.log("res:", res, "column:", column);
done();
},
uploadPreview: (file, column, done) => {
let previewType = ["jpg", "jpeg", "gif", "bmp", "png"];
let suffix = file.url.substring(file.url.lastIndexOf(".") + 1);
if (previewType.includes(suffix)) {
done()//默认执行预览
// obj.previewImageUrl = file.url;
// obj.previewImageFlag = true;
} else {
obj.$downloadFile(file.url, file.name);
}
},
},
],
};
};
效果图
