【vue3+ts+vant】上传图片

1.使用 van-upload 组件，进行样式和功能配置

组件基础结构
配置文字和图标
配置最多数量和最大体积
支持双向数据绑定，支持选择图片后触发函数，支持点击删除事件函数

基础结构


        <van-uploader></van-uploader>
        <!-- 有图片在就不提示文字了 -->
        <p class="tip" v-if="!fileList.length">最多9张图,最大5MB</p>

修改组件样式scss

  ::v-deep() {
    .van-uploader {
      &__preview {
        &-delete {
          left: -6px;
          top: -6px;
          border-radius: 50%;
          background-color: pink;
          width: 20px;
          height: 20px;
          &-icon {
            transform: scale(0.9) translate(-22%, 22%);
          }
        }
        &-image {
          border-radius: 8px;
          overflow: hidden;
        }
      }
      &__upload {
        border-radius: 8px;
      }
      &__upload-icon {
        color: gray;
      }
    }
  }

配置双向数据绑定，支持选择图片后触发函数，支持点击删除事件函数，最多数量和最大体积，文字和图标

 <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 type { UploaderAfterRead, UploaderFileListItem } from 'vant/lib/uploader/types'


const fileList = ref([])
const onAfterRead: UploaderAfterRead = (item) => {
  // 上传图片
}
const onDeleteImg = (item: UploaderFileListItem) => {
  // 删除图片
}

定义上传图片的接口，实现上传，实现删除

//后端约定 Body 参数(multipart/form-data) 传过去的数据是file，类型是File
//我们接收到的数据类型是<id:string,url:string>
export const uploadImage = (file: File) => {
  const fd = new FormData()
  fd.append('file', file)  //（key传过去的名字，文件）
  return request<id:string,url:string>('/upload', 'POST', fd)
}

实现上传

//传给后端的数据
const form = ref({
  pictures: []
})

const onAfterRead: UploaderAfterRead = (item) => {
  // item :UploaderFileListItem 选择一张图| UploaderFileListItem[] 选择多个图，我们是一个图
  //如果是数组 就结束，告诉他我们是一张图 是UploaderFileListItem，不告诉就点不出来东西
  if (Array.isArray(item)) return
 // item.file就是你选择的那张图片，因为file可能不存在,如果它不存在就不往下走了
  if (!item.file) return
  // 开始上传
  item.status = 'uploading'
  item.message = '上传中...'
  uploadImage(item.file)
    .then((res) => {
      // 上传成功
      item.status = 'done'
      item.message = undefined
     // 展示上传成功的图片 给 item 加上 url 是为了删除可以根据 url 进行删除
      item.url = res.data.url
     // 存储到form中，将来要提交
      form.value.pictures?.push(res.data)
    })
    .catch(() => {
      item.status = 'failed'
      item.message = '上传失败'
    })
}

删除

const onDeleteImg = (item: UploaderFileListItem) => {
  form.value.pictures = form.value.pictures?.filter((pic) => pic.url !== item.url)
}

【vue3+ts+vant】上传图片

猜你喜欢