如何在iOS11上使用JavaScript检测上传前的HEIC图像？

Question

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

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

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

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

因此，我想在客户端检测它，但是当我使用下面的代码在客户端检查文件MIME类型时，它返回image/jpg（实际上我没有iPhone，所以是我的一位朋友帮我测试的）。因此，看起来.heic图像已经在我检查MIME类型之前由iOS11内部转换为jpg。（但由于某种原因，这些转换后的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图像。

- S.Basnagoda

Answer 1

使用文件 MIME 类型的方法并不够强大，但是你可以使用 heic 和/或 heif 扩展名来限制可选择的文件。

例如：

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

- pdoherty926