由于VUE2本身并没有处理图片格式的能力,因此需要借助第三方库来实现图片格式的判断和转换。

一种常用的第三方库是exif-js,它可以读取图片的Exif信息,包括图片的格式。使用方法如下:

  1. 安装exif-js
npm install exif-js --save
  1. 引入exif-js
import exif from 'exif-js'
  1. 在上传图片的方法中,先通过FileReader将文件读取为二进制数据,然后使用exif-js读取图片格式,并将格式转换为小写字母。判断格式是否为heic,如果是则调用heic2jpeg库将图片转换为jpeg格式。最后将转换后的图片用FormData上传。
uploadImage() {
  const file = this.$refs.fileInput.files[0]
  const reader = new FileReader()
  reader.onloadend = () => {
    const buffer = reader.result
    const exifData = exif.readFromBinaryFile(buffer)
    const format = exifData ? exifData.FileType.toLowerCase() : null
    if (format === 'heic') {
      heic2jpeg({
        blob: file,
        quality: 0.7
      }).then(jpeg => {
        const formData = new FormData()
        formData.append('image', jpeg, 'image.jpg')
        // 使用axios或其他库上传formData
      })
    } else {
      const formData = new FormData()
      formData.append('image', file)
      // 使用axios或其他库上传formData
    }
  }
  reader.readAsArrayBuffer(file)
}

需要注意的是,heic2jpeg库需要单独安装:

npm install heic2jpeg --save

并且只支持在浏览器中使用,不能在Node.js环境下使用。

使用VUE2上传图片判断并转换heic格式

原文地址: https://www.cveoy.top/t/topic/D1P 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录