使用 Ant-Design-Vue 制作一个带图片上传功能的表单对话框
功能需求
使用 Antdv 的 Modal 组件内嵌一个 a-form 表单，具有添加数据和图片的功能。
页面结构设计
<template>
<!--Modal-->
<a-modal>
<div>
<a-form>
<a-form-item label="水果名称" name="fruitName">
<a-input type="text" placeholder="水果名称">
</a-form-item>
<a-form-item label="价 格" name="price">
<a-input type="number" placeholder="价格（元/公斤）">
</a-form-item>
<a-form-item label="库 存" name="stock">
<a-input type="number" placeholder="库存（公斤）">
</a-form-item>
<a-form-item label="图 片">
<a-upload>
<div>
<img v-if="!base64img" src="@/assets/plus.png">
<!-- ↑ 如果没有添加图片则显示一个加号占位符图片 -->
<img v-else :src="base64img">
<!-- ↑ 如果添加了图片则显示图片 -->
</div>
</a-upload>
</a-form-item>
<a-form-item>
<a-button>提交</a-button>
</a-form-item>
</a-form>
</div>
</a-modal>
</template>
只展示了基础的页面结构，省略了绑定的事件、逻辑和样式代码。
思路整理
Modal 中有一个表单，表单中有 4 个子项目，前三个为 input 输入框，最后一个是图片上传的组件，均为必填项。所以要为前三个输入框加上前端的表单验证，只需要在 a-form 的 :rules 中加入 [{required: true, message: ...}]。上传图片则采用单独的逻辑判断，因为表单输入的前三项和图片上传采用的是不同的接口，上传表单数据（水果名称、价格、库存）和图片的路径使用的是一个接口，上传图片至服务器使用的是另一个接口。所以我们要在点击提交按钮时添加一个判断图片是否为空的操作，如果为空则拒绝向服务器发送请求。
关于图片上传的部分可以看 这篇文章
由于 Antdv 的 Modal 组件是有默认的 确认 和 取消 按钮，这点对于提交表来来说不太方便，所以要禁用默认的按钮，再向表单中添加一个 form-item 提交按钮。
在上传文件时，为了避免上传相同名称的文件，我们要用当前时间戳来为文件重命名，手段是 const renameFile = new File(...)
添加数据成功后，需要重新从数据库中获取下数据，这个方法直接使用 onMounted 中的就可以了。由于数据量较少，故没有在服务端使用分页，每次请求都会返回数据库中的所有数据。
逻辑部分
// ↓ 控制 Modal 组件是否显示
const addModalVisible = ref<boolean>(false);
// 点击显示 Modal 的回调
function showAddModal() {
console.log("Show Add Modal");
addModalVisible.value = true;
}
// 表单数据
const formData = reactive({
fruitName: "",
price: "",
stock: "",
avatar: "",
})
/**
* 上传图片需要用到的变量
*/
const fileList = ref();
// ↑ 放置图片的
const base64img = ref();
// ↑ 用来放置 base64 转码后的图片
const btnLoading = ref<boolean>(false);
// 控制 提交 按钮的 loading 状态
/**
* 上传文件的回调
*/
function beforeUpload(file: any) {
const isImg = (file.type === 'image/jpeg' || file.type === 'image/png');
// 如果文件不是图片格式则禁止上传
if (!isImg) {
Notice.error("只能上传 jpeg/jpg/png 格式的文件！");
// ↑ Notice.error 是我自己写的 Notice 类的一个静态函数
// 用的是 antdv 的 Notifiacation
return Upload.LIST_IGNORE;
// ↑ 这个不解释了，上一篇博客中提到了
}
fileList.value = file;
// ↓ 获取所需要上传图片的 Base64 编码
getBase64(fileList.value, (cb_img: string) => {
// 将获取到的所要上传图片的 Base64 编码渲染到图片上
base64img.value = cb_img;
})
return false;
}
/**
* 待上传图片被删除的回调
*/
function handleRemove() {
fileList.value = null;
// ↑ 置空待上传文件列表
base64img.value = null;
// ↑ 显示默认占位图
}
/**
* 点击 Modal 中的添加按钮的回调
*/
function addItem() {
// 添加图片文件到服务器指定位置
const imgForm = new FormData();
if (fileList.value != null) {
// ↓ 以当前时间戳重命名文件
const newFileName = Date.now() + "." + fileList.value.name.substring(fileList.value.name.lastIndexOf(".") + 1);
// ↓ avatar 是数据库中储存图片地址的字段，后面会加上地址重新赋值一次
formData.avatar = newFileName;
const renameFile = new File([fileList.value], newFileName);
// ↑ 创建新文件：以新文件名重命名文件
imgForm.append("file", renameFile);
} else {
Notice.error("图片不能为空！");
return Upload.LIST_IGNORE;
}
btnLoading.value = true;
// 将图片上传至服务器
const addData = new Promise((resolve, reject) => {
// fruitApi 是自己封装的 Axios
fruitApi({
method: 'put',
url: 'api/upload',
data: imgForm,
})
.then((resp) => {
resolve(resp);
})
.catch((error) => {
reject(error);
})
})
// 添加数据至数据库
// 并添加文件的名称和路径至数据库
const uploadPic = new Promise((resolve, reject) => {
fruitApi({
method: 'post',
url: 'api/fruits',
data: {
fruitName: formData.fruitName,
avatar: imagesAddr + "/" + formData.avatar,
// imagesAddr 是服务器储存图片的地址
price: formData.price,
stock: formData.stock,
}
})
.then((resp: any) => {
resolve(resp);
})
.catch((error) => {
reject(error);
})
})
Promise.all([addData, uploadPic])
.then((resp) => {
console.log("请求成功: ");
console.log(resp);
changeUploadItemColor("success");
// ↑ 上传成功改变颜色，也在上个博客提到过了
Notice.success("添加成功！");
setTimeout(() => {
getFruits();
// ↑ 上传成功后重新获取数据
}, 500)
})
.catch((error) => {
console.log("请求失败: ");
console.log(error);
changeUploadItemColor("error");
Notice.error("添加失败~");
})
.finally(() => {
btnLoading.value = false;
// 取消按钮的 loading 状态
})
}
完善页面结构
<!--Modal-->
<a-modal v-model:visible="addModalVisible"
title="模态对话框"
:confirm-loading="btnLoading"
:footer="null"
>
<div>
<a-form
:model="formData"
@finish="addItem"
>
<a-form-item label="水果名称" name="fruitName" :rules="[{required: true, message: '请输入水果名称'}]">
<a-input type="text" placeholder="水果名称" v-model:value="formData.fruitName"/>
</a-form-item>
<a-form-item label="价 格" name="price" :rules="[{required: true, message: '请输入价格'}]">
<a-input type="number" placeholder="价格（元/公斤）" suffix="RMB" v-model:value="formData.price"/>
</a-form-item>
<a-form-item label="库 存" name="stock" :rules="[{required: true, message: '请输入库存'}]">
<a-input type="number" placeholder="库存（公斤）" v-model:value="formData.stock"/>
</a-form-item>
<a-form-item label="图 片">
<a-upload
:before-upload="beforeUpload"
:max-count="1"
@remove="handleRemove"
>
<div>
<img v-if="!base64img" src="@/assets/plus.png" />
<img v-else :src="base64img" />
</div>
</a-upload>
</a-form-item>
<a-form-item>
<a-button html-type="submit" :loading="btnLoading">提交</a-button>
</a-form-item>
</a-form>
</div>
</a-modal>
完整代码：https://blog-static.cnblogs.com/files/blogs/754613/modalForm.vue.js?t=1665405534
