用户上传附件,上传图片使用到了 Vant 的组件 van-uploader
,该组件的详细使用请查看官方文档。
<van-uploader
bind:after-read="uploadPicture"
max-count="6"
preview-size="100"
file-list="{{attachment}}"
/>
上述代码中
file-list
用来记录已经上传成功的图片,会把结果展示到页面中max-count
限定最多上传几张图片preview-size
预览区域的宽高尺寸bind:after-read
用户选择图片后调用的回调函数
接下来调用 wx.uploadFile
来实现图片的上传
参考示例代码如下所示:
// repair_pkg/pages/form/index.js
Page({
// 上传文件
uploadPicture(ev) {
// 上传文件的信息
const { file } = ev.detail
// 调用 API 实现文件上传
wx.uploadFile({
url: wx.http.baseURL + '/upload',
filePath: file.url,
name: 'file',
header: {
Authorization: 'Bearer ' + getApp().token,
},
success: (result) => {
// 处理返回的 json 数据
const data = JSON.parse(result.data)
// 检测接口是否调用成功
if (data.code !== 10000) return wx.utils.toast('文件上传失败!')
// 先获取原来已经上传的图片
const { attachment } = this.data
// 追加新的上传的图片
attachment.push(data.data)
// 渲染数据
this.setData({ attachment })
},
})
},
})
-
上传成功的图片地址追加到
file-list
中则组件内部分自动将结果渲染出来,剩下的表单数据手机号码、问题描述通过model:value
获取即可。
其次需要对表单数据的合法性进行校验,使用 wechat-validate
插件进行验证:
// repair_pkg/pages/form/index.js
// 导入表单验证插件
import wxValidate from 'wechat-validate'
Page({
behaviors: [wxValidate],
data: {
houseId: '',
repairItemId: '',
mobile: '',
appointment: '',
description: '',
attachment: [],
},
rules: {
houseId: [{ required: true, message: '请选择报修房屋!' }],
repairItemId: [{ required: true, message: '请选择维修的项目!' }],
mobile: [
{ required: true, message: '请填写手机号码!' },
{ pattern: /^1[3-8]\d{9}$/, message: '请填写正确的手机号码!' },
],
appointment: [{ required: true, message: '请选择预约日期!' }],
description: [{ required: true, message: '请填写问题描述!' }],
},
})
验证数据时上传的附件图片不是必填项,因此可不必对其进行校验。
最后就可以调用接口提交表单数据了
参考示例代码如下所示:
// repair_pkg/pages/form/index.js
// 导入表单验证插件
import wxValidate from 'wechat-validate'
Page({
behaviors: [wxValidate],
data: {
houseId: '',
repairItemId: '',
mobile: '',
appointment: '',
description: '',
attachment: [],
},
// ...
rules: {
// ...
},
async submitForm() {
// 验证表单数据
if (!this.validate()) return
// 提取接口需要的数据
const { houseId, repairItemId, mobile, appointment, description, attachment } = this.data
// 调用接口
const { code } = await wx.http.post('/repair', {
houseId,
repairItemId,
mobile,
appointment,
description,
attachment,
})
// 检测接口是否调用成功
if (code !== 10000) return wx.utils.toast('在线报修失败!')
// 跳转到报修列表页面
wx.redirectTo({
url: '/repair_pkg/pages/list/index',
})
},
})
在线报修成功后会跳转到报修列表页面中查看报修的数据。