Question

我有一个旧的Rails表单，我想将其转换为Ember Data：

<form>
  <input type="file" name="myfile" />
  <input type="submit" />
</form>

存储在数据库中的内容需要与我目前的工作相匹配。用户可以上传所有类型的文件，而不仅仅是二进制。我选择了一个特定的图像，在数据库中，文件数据以此开头：

[1] pry(#<AttachmentsController>)> @attachment.data
=> "\xC3\xBF\xC3\x98\xC3\xBF\xC3\xA2\x02\x1CICC_PROFILE\x00

我想将表单转换为使用javascript和Ember.JS数据上传，而不是表单提交。上传我的数据的javsacript是：

var attachment = this.store.createRecord('attachment');
attachment.set('data', data);
attachment.save();

问题是数据。当它到达服务器时，它与表单的不同之处。我尝试过以多种方式阅读数据：

readAsBinaryString产生了不同的字符串：

reader.readAsBinaryString(input.files[0]);
// Note: readAsBinaryString is DEPRECATED
[1] pry(#<AttachmentsController>)> @attachment.data
=> "\xC3\xBF\xC3\x98\xC3\xBF\xC3\xA2\x02\x1CICC_PROFILE\x00

在上传二进制文件时，文本读取会偶尔崩溃

reader.readAsText(input.files[0]);
// crashes

readAsDataURL生成的结果与我在数据库中存储的内容不匹配

reader.readAsDataURL(input.files[0]);
[1] pry(#<AttachmentsController>)> @attachment.data
=> "data:image/jpeg;base64,/9j/4gIcSUNDX1BST0ZJTEUAAQEAAAIMbGNtcwIQAABtb

readAsArrayBuffer看起来很有希望，但我不确定我应该怎么做才能发送arrayBuffer

感谢任何帮助！

Answer 1

解码数据URI

您可以对readAsDataURL提供的版本进行base64解码。这是一个天真的实现。

require 'base64'
decoded_result = Base64.decode64(data.gsub('data:image/jpeg;base64,', ''))

有适当的processing Data URIs in Ruby

库

使用普通表格上传文件

代码链接

uploading images in Ember有一个图书馆，请阅读其代码。你对这些领域特别感兴趣。

Input View for handling events

What to upload

How to create form

How to upload

摘录

App.FileView = Ember.View.extend({
  MultipleInput: Ember.View.extend({
    tagName: 'input',
    classNames: 'files',
    attributeBindings: ['type', 'multiple'],
    type: 'file',
    multiple: 'multiple',
    change: function(e) {
      var input = e.target;
      var file = input.files[0];
      var fd = new FormData();

      fd.append('Content-Type', file.type);
      fd.append('file', file)

      $.ajax({
        url: UPLOAD_URL,
        type: "POST",
        data: fd,
        processData: false,
        contentType: false,
        headers: this.get('requestHeaders'),
        xhr: function() {
          return $.ajaxSettings.xhr();
        }
      })
    }
  }),
});

FileReader通过Ember Data上传文件

1 个答案:

解码数据URI

使用普通表格上传文件

代码链接

摘录