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

【问题标题】：How to detect heic image before upload in JavaScript on iOS11?如何在 iOS11 上的 JavaScript 中上传之前检测 heic 图像？
【发布时间】：2019-11-21 01:38:23
【问题描述】：

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

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

例如，当我们提交带有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 图像。

【问题讨论】：

标签： javascript html image-uploading ios11

【解决方案1】：

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

例如：

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

【讨论】：