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

Question

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

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

作为示例，当我们提交带有abc.heic图像的表单时，尝试通过上述库进行压缩时，客户端浏览器应用程序崩溃。因此，我们希望限制将.heic图像附加到图像输入。

不幸的是，我们无法.heic在服务器端识别（我认为是）图像，因为我们abc.jpg在后端收到文件名，因为iOS11 在上传之前会自动将.heic图像转换为jpg图像。

因此，我想在客户端进行检测，但是当我使用下面的代码在客户端检查文件MIME类型时，它会返回image/jpg（实际上我没有iPhone，所以其他一些朋友为我做了）。因此，在我检查MIME类型之前，.heic图像似乎jpg已由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">