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

Question

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

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

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

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

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

Answer 1

它不像使用mime类型那样健壮，但是您[[可以使用heic和/或heif扩展名来限制可以选择的文件。

例如：

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