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删除数组中的图片,此处仅为前端的简单删除
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值