文件上传功能会显示 Safari 和 Chrome iOS8.1.2 上带有空字符串的数据

File Upload shows data with empty strings on Safari and Chrome iOS8.1.2

本文关键字:字符串 数据 Chrome 功能 显示 Safari 文件 iOS8      更新时间:2023-09-26

您好,我们在Chrome上的文件上传和IOS 8.1.2上的Safari上遇到了问题。一些照片上传显示带有空字符串的数据,其他照片显示正常。 有人知道解决方法,以便上传的照片可以一致地显示吗?非常感谢。

最初我们认为这是iOS 8 Safari上文件上传功能损坏的已知问题。"http://blog.uploadcare.com/you-cannot-upload-files-to-a-server-using-mobile-safari/"。但是,它似乎是8.0.0的问题,并且应该已修复。此外,该问题不仅限于Safari,也出现在Chrome iOS中。

具体来说,当选择的照片直接从iPHONE相机拍摄时,数据显示为空(请参阅登录控制台)

[日志] 对象(控制器.js,第 228 行)src:"data:","

但是,当选择的照片是屏幕截图或从电子邮件保存的照片时,实际上会显示图像并发送数据

[日志] 对象(控制器.js,第 228 行)src: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/

7QA4UGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

有没有人遇到过类似的问题?为什么它适用于某些照片而不适用于其他照片?有谁知道显示从相机本身拍摄的图像的任何解决方法?


这里的代码片段:

$scope.getAlbumPicture = function() {
    Camera.getAlbumPicture().then(function(fileURI) {
        $scope.normalisePicture(fileURI, function(dataURL) {
            Local.setTemp(dataURL);
            $state.go('tab.camera-detail');
        });
    }, function(err) {
        console.log(err);
    });
};
$scope.readImage = function(input) {
    if (input.files && input.files[0]) {
        var fileReader = new FileReader();
        fileReader.onloadend = function() {
            $scope.normalisePicture(fileReader.result, function(dataURL) {
                Local.setTemp(dataURL);
                $state.go('tab.camera-detail');
            });
        };
        fileReader.readAsDataURL(input.files[0]);
    }
};

TL;DR 最近我遇到了类似的问题,发现了这个线程,这可能是iPhone的内存不足问题,除了使用canvas元素调整大尺寸图像的大小外,您可以做的不多,我使用1200作为图像调整大小的最长宽度/高度,然后一切再次正常工作。

对于任何功能参考,我的测试中出现的更具体的硬件和软件问题是iPhone 6 Plus和iOS 8.1.2,我尝试对图像执行的过程是:

  1. FileReader.onLoad = funcFileReader.readAsDataURL()一起使用base64input[type="file"]的文件作为字符串读取。
  2. base64指定为new image()src
  3. 在里面image.onload = func画一个新的canvas 2d context,与上图相同,高度和高度。
  4. 检查一些方向EXIF信息,然后旋转画布。
  5. 最后用base64一串新图像做其他工作人员,生成canvas.toDataURL()形式。

在步骤 1 到步骤 2 和步骤 5 之间随机出现的空data:取决于从"input[type="file"]获取的图像大小。

就我而言,这里的iOS Safari似乎可以将图像数据分配给具有相同宽度和高度的canvas,但如果画布的尺寸非常大,则无法toDataURL画布。但是 Safari 无论如何都不会挂起,我可以重新点击input[type="file"]以获取下一个文件,因为空data:是从上一个文件输出的。