javascript - 如何在 iOS11 上的 JavaScript 中上传之前检测 heic 图像？

Question

我们有一个图像上传应用程序，我们使用外部 JavaScript library 在客户端压缩图像上传之前。

现在我们在上传扩展名为 .heif 的图像文件时遇到了 iOS11 特有的问题。或 .heic .

例如，当我们使用 abc.heic 提交表单时图像，客户端浏览器应用程序在尝试通过上述库压缩时崩溃。所以我们要限制附加 .heic图像到图像输入。

不幸的是，我们无法识别(我想是的).heic服务器端的图像，因为我们收到的文件名是 abc.jpg后端自iOS11自动转换.heic图像到 jpg上传前的图片。

因此我想在客户端检测它，但是当我使用下面的代码在客户端检查文件 MIME 类型时，它返回 image/jpg (实际上我没有 iPhone，所以其他 friend 帮我做了)。所以它看起来像 .heic图像已转换为 jpg在我检查 MIME 类型之前由 iOS11 在内部进行。 (但由于某种原因，那些转换后的 jpg 文件无法被此库压缩)

$(document).on('change', '[id=uploading_file]', (evt) => {
    'use strict'
    const files = [...evt.target.files];
    var uploadingFile = files[0];
    var fileType = uploadingFile["type"]; // get file MIME type
    var ValidImageTypes = ["image/jpg", "image/jpeg", "image/png", "image/gif", "image/bmp"];

    if (jQuery.inArray(fileType, ValidImageTypes) >= 0) {
        // image compression code goes here.
    }
});

一些替代解决方案:

我还做了一些其他替代修复以避免附加 .heic如下图，虽然它不是一个有保证的解决方案。已更改 accept="image/*"至 accept="image/jpg, image/jpeg, image/png, image/gif, image/bmp" ，但仍显示 abc文件选择器上的图像。

Answer 1

它不如使用 mime 类型强大，但您可以使用 heic 和/或 heif 扩展名来限制可以选择的文件。

例如:
<input type="file" accept=".heic" class="image-upload-handle" />