v3+vant图片上传

1、使用vant中的van-upload组件进行图片上传，部分api属性见下表

属性名	定义
upload-text	上传区域文字提示
upload-icon	上传区域图标名称或图片链接，等同于 Icon 组件的name属性
max-count	最大上传图片数量
max-size	最大上传容量
after-read	文件读取完成后的回调函数
@delete	删除文件预览时触发事件
v-model	双向绑定，数组

2、定义接口

export const uploadImage = (file: File) => {
  const fd = new FormData()
  fd.append('file', file)
  return request<Image>('/upload', 'POST', fd)
}

此处接口需要请求的数据为FormData格式，在函数中使用new构造一个FormData的对象，再通过append方法将传入过来的file（类型为File的图片）推入FormData中，发送请求。

3、页面中调用

        <van-uploader
          :after-read="onAfterRead"
          @delete="onDeleteImg"
          v-model="fileList"
          max-count="9"
          :max-size="5 * 1024 * 1024"
          upload-icon="photo-o"
          upload-text="上传图片"
        ></van-uploader>

import { uploadImage } from '@/services/img'

//item是回调函数的file对象
const onAfterRead = (item) => {
  //不支持多选，只能一张一张选择
  if (Array.isArray(item)) return
  //如果没有选择，直接返回
  if (!item.file) return
  // 开始上传
  item.status = 'uploading'
  item.message = '上传中...'
  uploadImage(item.file)
    .then((res) => {
      item.status = 'done'
      item.message = undefined
      item.url = res.data.url
      form.value.pictures?.push(res.data)
    })
    .catch(() => {
      item.status = 'failed'
      item.message = '上传失败'
    })
}

4、删除图片

const onDeleteImg = (item: UploaderFileListItem) => {
  form.value.pictures = form.value.pictures?.filter((pic) => pic.url !== item.url)
}
//使用filter删除数组中的图片，此处仅为前端的简单删除