前端实现项目内预设图片,选择图片将路径转为base64编码文件上传

        最近做的一个项目内需要表单内预设一系列图标供客户选择,一般来说预设的图标是通过接口返回的编码或者地址显示到页面上,但这个项目产品和后端选择前端预设.so看看咋实现的吧。

        鉴于一个个转64编码过于麻烦，所以首先将需要展示的图标改成xxx.png的形式放在一个文件夹内。通过js代码读取文件夹图片，这里使用的是import.meta.glod方法

import.meta.glod:

定义一个路径模式，匹配需要导入的模块。

该模式可以使用 * 或 ** 通配符，也可以使用 ! 进行反选。

eg:

匹配某个文件夹下的所有 .js 文件：./path/*.js
匹配某个文件夹及其子文件夹下的所有 .vue 文件：./path/**/*.vue
排除某个文件夹下的某个文件：./path/!(*.md)
需要注意的是，路径模式中的通配符和反选符号只能出现在路径的末尾，不能出现在路径的中间或开头。

同时{ eager: true }参数表示立即加载这些模块。

导入文件夹所有图片代码如下：

const requireImages = import.meta.glob('./image/**/*.png', { eager: true })

const iconList = ref([])

Object.keys(requireImages).forEach((e) => {
  iconList.value.push(e.replace('./', '/src/views/modelForm/modelimage/'))
})

第一行就是导入同级image文件夹及其子文件夹下所有的.png文件，此时观察第一行代码返回requireImages 应该是包含相对路径的Object对象。

第三行代码则是取出requireImages键名，转化了一下路径的形式。

这一步结束后v-for循环出图标。

接下来的步骤就是点击循环出来的图片时获取图片的base64编码，为图片添加点击事件代码如下

const selectIcon = (url) => {
  const img = new Image()
  img.src = url
    img.onload = () => {
    const canvas = document.createElement('canvas')
    canvas.width = img.width
    canvas.height = img.height
    const ctx = canvas.getContext('2d')
    ctx?.drawImage(img, 0, 0, img.width, img.height)
    const ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
    const dataURL = canvas.toDataURL('image/' + ext)
  }
}

如此得到的便是路径转为的base64编码啦.over

---

注意!

在上述代码中,打包部署后发现用glod这种形式会导致引入的图片失效,所以新的引入方法如下:

const modules: Record<string, { [key: string]: any }> = import.meta.glob("./modules/*.ts", {
  eager: true
})