用于 AJAX 文件上传的分段或 base64

Multipart or base64 for AJAX file uploads?

本文关键字：分段 base64 AJAX 文件 用于      更新时间：2023-09-26

我正在使用EmberJS编写一个单页应用程序，需要上传一些文件。

我编写了一个特殊的视图，它包装了文件输入字段并提取了第一个选定的文件。这使我可以将File对象绑定到模型属性。

现在我必须做出选择。

我可以编写一个特殊的文件转换，将File -Object 序列化为 base64 并简单地放置/发布它。

或者我可以拦截RESTAdapter方法createRecord和updateRecord来检查每个模型的File对象，并将 PUT/POST 请求切换到 multipart/form-data 并在FormData的帮助下发送

这些方向之一是否会带来重大问题？

我不得不评估我正在开发的 Restful API 的相同问题。在我看来，最理想的方法是将 RESTAdapter 与 base64 编码数据一起使用。

话虽如此，我不得不在我的情况下使用多部分/表单数据方法，因为当您对文件数据进行 base60 编码时，数据传输要高出 30%。由于我的 API 必须接受大 （100MB+） 文件，因此我选择使用 API 的 POST 方法来接收多部分表单数据，文件和 json 数据是 POST 变量之一。

因此，除非您需要像我一样上传大文件，否则我建议您始终坚持使用 REST 方法。

我自己也遇到了这个问题，最终使用 FormData 对象使用了一个简单的 jQuery AJAX 调用。 我的多选实现（可以一次删除多个文件）如下所示：

filesDidChange: function() {
  // Get FileList
  var $input = this.$('input'),
      fileList = $input.get(0).files;
  // Iterate files
  for (var i = 0; i < fileList.length; i++) {
    var file = fileList[i],
      formData = new FormData();
    // Append information to FormData instance
    formData.append('attachment[title]', file.name);
    formData.append('attachment[file]', file);
    formData.append('attachment[post_id]', this.get('post.id'));
    // Send upload request
    Ember.$.ajax({
      method: 'POST',
      url: '/attachments',
      cache: false,
      contentType: false,
      processData: false,
      data: formData,
      success: makeSuccessHandler(this),
      error: makeErrorHandler(this)
    });
  }
  // Notify
  this.container.lookup('util:notification').notify('Uploading file, please wait...');
  // Clear FileList
  $input.val(null);
},
相关文章：