HEIC文件与FilePond一起使用？

Question

我正在尝试用文件键上传一个HEIC文件。我应该指定哪种文件类型？

现在我有这个：

  accepted-file-types="image/jpeg, image/png, image/gif, image/jpg"

我在文件里找不到任何关于这个的东西，我的实验也不起作用。

下面是我试图上传的测试文件：

https://github.com/tigranbs/test-heic-images/raw/master/image1.heic

Answer 1

感谢@rik提供的指针。下面是一些使用VUE中的filepond完成此操作的代码。感觉有点怪怪的，但做的很好。

接受Image/HEIC内容类型并添加自定义验证器：

<file-pond
  v-if="supported"
  ref="pond"
  name="photo"
  :allow-multiple="multiple"
  accepted-file-types="image/jpeg, image/png, image/gif, image/jpg, image/heic"
  :file-validate-type-detect-type="validateType"
  :files="myFiles"
  image-resize-target-width="800"
  image-resize-target-height="800"
  image-crop-aspect-ratio="1"
  label-idle="Drag & Drop photos or <span class=&quot;btn btn-white ction&quot;> Browse </span>"
  :server="{ process, revert, restore, load, fetch }"
  @init="photoInit"
  @processfile="processed"
  @processfiles="allProcessed"
/>

然后在验证器中检查文件名，以处理未设置正确MIME类型的浏览器：

validateType(source, type) {
  const p = new Promise((resolve, reject) => {
    if (source.name.toLowerCase().indexOf('.heic') !== -1) {
      resolve('image/heic')
    } else {
      resolve(type)
    }
  })

  return p
}

然后在进程回调中，找到HEIC文件，并使用heic2any将其转换为PNG，并在上载中使用该数据。

async process(fieldName, file, metadata, load, error, progress, abort) {
  await this.$store.dispatch('compose/setUploading', true)

  const data = new FormData()
  const fn = file.name.toLowerCase()

  if (fn.indexOf('.heic') !== -1) {
    const blob = file.slice(0, file.size, 'image/heic')
    const png = await heic2any({ blob })
    data.append('photo', png, 'photo')
  } else {
    data.append('photo', file, 'photo')
  }

  data.append(this.imgflag, true)
  data.append('imgtype', this.imgtype)
  data.append('ocr', this.ocr)
  data.append('identify', this.identify)

  if (this.msgid) {
    data.append('msgid', this.msgid)
  } else if (this.groupid) {
    data.append('groupid', this.groupid)
  }

  const ret = await this.$axios.post(process.env.API + '/image', data, {
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    onUpLoadProgress: e => {
      progress(e.lengthComputable, e.loaded, e.total)
    }
  })

  if (ret.status === 200 && ret.data.ret === 0) {
    this.imageid = ret.data.id
    this.imagethumb = ret.data.paththumb
    this.image = ret.data.path

    if (this.ocr) {
      this.ocred = ret.data.ocr
    }

    if (this.identify) {
      this.identified = ret.data.items
    }

    load(ret.data.id)
  } else {
    error(
      ret.status === 200 ? ret.data.status : 'Network error ' + ret.status
    )
  }

  return {
    abort: () => {
      // We don't need to do anything - the server will tidy up hanging images.
      abort()
    }
  }
},

然后，服务器很高兴地没有意识到原始文件是HEIC的，一切都正常进行。