【无标题】微信小程序用户上传附件上传图片

用户上传附件，上传图片使用到了 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 })
      },
    })
  },
})

1. 上传成功的图片地址追加到 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',
    })
  },
})

在线报修成功后会跳转到报修列表页面中查看报修的数据。