Mac上的Safari 10无法在XHR中上传文件

Question

我正在使用XHR将图像上传到启用了CORS的外部服务器.

在Chrome,Firefox和IE中一切正常.

但是使用Safari,服务器响应有mime类型错误.说文件类型是'application/octet-stream',而它应该是'image/*'.

我禁用了mime类型检查后,safari可以上传文件但是它的所有0b空文件.

有谁知道为什么？

    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'http://up-z1.qiniu.com/', true);
    var formData;
    formData = new FormData();
    formData.append('key', file.name);
    formData.append('token', acessToken);
    formData.append('file', file);
    xhr.onreadystatechange = function (response) {
        if (xhr.readyState == 4 && xhr.status == 200 && xhr.responseText != "") {
            callback(true,null);
        } else if (xhr.status != 200 && xhr.responseText) {
            callback(false,null);
        }
    };
    xhr.send(formData);

Answer 1

所以根据另一个stackoverflow问题,我不记得哪个Safari有一个bug,当其他浏览器执行file.toBlob()时,safari会执行file.toString().因此,解决方法是将您自己的文件写入blob函数并上传该blob.

var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://up-z1.qiniu.com/', true);
var formData;
formData = new FormData();
formData.append('key', file.name);
formData.append('token', acessToken);
formData.append('file', fileToBlob(file));
xhr.onreadystatechange = function (response) {
    if (xhr.readyState == 4 && xhr.status == 200 && xhr.responseText != "") {
        callback(true,null);
    } else if (xhr.status != 200 && xhr.responseText) {
        callback(false,null);
    }
};
xhr.send(formData);