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有一个错误，当其他浏览器执行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);

Answer 2

这是一个非常奇怪的问题。我得出的结论与+ arslan2012相同。

对于任何坚持他引用的fileToBlob功能的人来说，这就是我正在使用的

const readFileContents = function(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = function(evt) {
      resolve(evt.target.result)
    };
    reader.onerror = function() {
      reader.abort()
      reject(new DOMException("Unable to read the file."))
    }
    reader.readAsArrayBuffer(file);
  })
}

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

2 个答案: