vue3+vant3上传图片至oss-图片展示

前段时间搞了一下这块，把学习内容写出来 记录避免自己忘记

首先看下vant官网上传组件的 地址： https://vant-contrib.gitee.io/vant/#/zh-CN/uploader

参考组件库的代码 尝试后发现能拿到上传图片的返回 信息，

其中包含了 图片名字，图片名称，图片队列内容相关。

这块还需要改动一下 ，没法直接拿来用 ，直接看下代码：

index.vue

<van-uploader v-model="fileImg" :after-read="afterRead" v-if="uploadState" :preview-image="false"
   accept="image/*" :max-size="10 * 1024 * 1024" class="upload-opacity">
     <img :src="uploadBtn" class="upload-icon" />
</van-uploader>

 data() {
    return {
      fileImg: [],
      uploadState: false,
    }
  },

method:{
async afterRead(file) {
      const { type, name, size } = file?.file;
      const par = {
        file_source: "xcx-task",
        file_name: name,
        file_memo: name,
        file_type: type,
        file_size: size,
        relation_id: this.patiendValue,
        file: file.file,
      };
      const { fileUrl } = await useUpload(par); // 拿到文件的信息
      let imgUrl = fileUrl.value;
      // console.log("fileUrl", imgUrl);
      this.pageNum = 1;
      this.listOnLoad()
    },
}

useUpload.ts

import {ref} from 'vue'
import {uploadApi} from '@/service/common'
import { Toast } from 'vant';

export default async function useUpload(data:any) {
  
  const fileUrl = ref('')
  const videoImage = ref('')
  let res
  try{
     res = await uploadApi(data) //请求阿里云接口返回的对象参数 ，包含url，图片，视频，名称，时间，等等。
  }catch (e){
    Toast('网络异常，请重新上传')
  }
 
  
  if(!res){
    return {fileUrl:'', videoImage:''}
  }
  fileUrl.value = res?.sign_url
  videoImage.value = res?.video_image || ''
  return {fileUrl, videoImage}
}