1、需求描述

用户可以选项系统固定的几个图标，也可以自定义上传图片。系统固定图标存在 src\assets\images\app 路径中。

2、关键代码

文件转换关键代码

const moudles: any = import.meta.glob('@/assets/images/app/*') // 获取所有默认图标
// path 格式为 '/src/assets/images/app/*******.png'
const createFileFromImage = async (path: string, name: string) => {moudles[path]().then(async (res: { default: string | URL }) => {// 将文件转为blob格式const response = await fetch(new URL(res.default, import.meta.url))const arrayBuffer = await response.arrayBuffer()const blob = new Blob([arrayBuffer], { type: 'image/png' })// blob格式转化为file格式const file = new File([blob], name, { type: 'image/png' })// 依据实际请求需求，还可转换为formData格式const formData = new FormData()formData.append('file', file)// 你的处理逻辑，我赋值给了a-upload组件的变量coverFileList.value = [{name: randomImgName.value,uid: '-1',originFileObj: file as any}]})
}

给a-upload组件初始化一个随机系统图标关键代码
图片为系统内置的10张图片

const randomImgName = ref(`default-${getRandomNumber(1, 10)}.png`) // 随机获取一张图片
const randomImgPath = ref(`/src/assets/images/app/${randomImgName.value}`) // 图片地址
createFileFromImage(randomImgPath.value, randomImgName.value) // 调用文件转换方法/*** 获取指定范围随机数* @param min 最小值* @param max 最大值*/
const getRandomNumber = (min: number, max: number) => {return Math.floor(Math.random() * (max - min + 1)) + min
}

3、img标签src使用变量打包后图片无法展示

问题： img标签src使用变量打包后会出现图片无法展示

原因：vite 官方默认的配置，如果资源文件在assets文件夹打包后会把图片名加上 hash值，但是直接通过 :src="imgSrc"方式引入并不会在打包的时候解析，导致开发环境可以正常引入，打包后却不能显示的问题

import.meta.glob()：在vue2中支持require导入模块或文件，但是在vue3不支持require,可以使用import.meta.glob方法来支持批量导入文件

html代码块

<img :src="imgUrl[index - 1]" @click="changeDefaultImg(`default-${index}.png`)" />

typescript 代码块

const moudles: any = import.meta.glob('@/assets/images/app/*')
const imgUrl: Ref<string[]> = ref([])
const getAssetsFile = (url: string, index: number) => {moudles[url]().then((res: { default: string }) => {imgUrl.value[index] = res.default})
}