Safari 中的 React/Node 文件上传失败答案

【问题标题】：React/Node File Upload Fails in SafariSafari 中的 React/Node 文件上传失败
【发布时间】：2017-04-13 14:54:19
【问题描述】：

最近在尝试在 Safari 中上传文件时发现了一个问题。我在 macOS 10.12.3 上的 Safari 10.0.3 中遇到了与在 iOS 10.3.1 上的移动 Safari 中相同的问题。此代码在 Google Chrome 和 IE 中都能完美运行，但在 Safari 中会无限期挂起。

另外值得注意的是：当没有附加文件时，FormData 在 Safari 中成功发布。

这是我的 JSX/HTML：

<Button bsStyle="primary" onClick={() => this.refs.selectFiles.click()}>
   Browse <input style={{ display: 'none' }} ref="selectFiles" type="file" onChange={this.handleAttachments} accept=".jpg,.jpeg,.png,.gif,.apng,.tiff,.tif,.bmp,.pdf,.xcf" multiple />
</Button>

这是我的客户端网络代码：

export function createAction(action, files) {
const data = new FormData();
for (var prop in action) {
  data.append(prop, action[prop]);
}
if (files) {
  for (let i = 0; i < files.length; i++) {
    data.append(files[i].name, files[i]);
  }
}

return fetch('api/actions', {
  credentials: 'include',
  headers: { 'Accept': 'application/json', "Content-Type": "multipart/form-data" },
  method: 'post',
  body: data
});
}

这是在服务器上处理文件的方式：

function insertActionAndComment(req, res) {
  if (req.files) {
  funcs = req.files.map(file => {
    return db.proc('dbo.InsertAttachment', request => {
      request.addParameter('ID', TYPES.NVarChar, id);
      request.addParameter('Name', TYPES.NVarChar, file.fieldname);
      request.addParameter('File', TYPES.VarBinary, file.buffer);
    });
  });
  }
  //Other processing code

  Promise.all(funcs)
    .then(() => {
  //Send notification email, etc

  res.status(201);
  res.end();
  })
  .catch(error => {
    console.error(error);
  });
}

router.route('/')
.post(upload.any(), insertActionAndComment)

我发现 imgur 已经在他们的 Safari 移动网站上完美地实现了这个功能。

这是他们网站上POST 中图像的 FormData 示例：

------WebKitFormBoundaryvnoeYeAi7QAdnoE1
Content-Disposition: form-data; name="image"; filename="image.jpg"
Content-Type: image/jpeg


------WebKitFormBoundaryvnoeYeAi7QAdnoE1--

这是我的文件“POST”中的 FormData 示例：

------WebKitFormBoundaryobH1qsBmUuSGQHiX
Content-Disposition: form-data; name="Screen Shot 2017-04-11 at 4.16.54 
PM.png"; filename="Screen Shot 2017-04-11 at 4.16.54 PM.png"
Content-Type: image/png


------WebKitFormBoundaryobH1qsBmUuSGQHiX--

【问题讨论】：

actioncreateAction 函数是什么？
@guest271314 action 是我在 POST 中包含的其他一些 FormData 字段。
没试过 safari。究竟发生了什么？
@guest271314 请求只是旋转和旋转......现在已经持续了 20 分钟。
“旋转”是什么意思？问题服务器端吗？

标签： javascript reactjs safari

【解决方案1】：

经过大量研究，我发现 Safari 不能很好地配合 Windows 身份验证，这就是我的问题的原因。

如果可以，请转到 IIS 管理器并从 Windows 身份验证切换到基本身份验证，文件应该会成功上传。

【讨论】：