1

当 jquery-file-upload 将图像处理为缩略图时，当我使用 Ember 渲染视图时，它无法正确显示它们。要么显示一个空画布，要么 Ember 尝试获取未找到的 blob:http。

因此，当 jquery-upload 处理图像调整大小并调用on('fileuploadprocessdone')

App.VideosNewView = Ember.View.extend(
  didInsertElement: ->
    self = this
    $("#fileupload").fileupload(
      dataType: "json"
      autoUpload: false
      previewCanvas: false
    ).on('fileuploadprocessdone', (e, data) ->
      console.log "DONE"
      file = data.files[0]
      self.get('controller').set('addFile', file);
   )
)

相应的文件被添加到 EmberController 中的文件数组中：

App.VideosNewController = Ember.ObjectController.extend(
  files: []

  actions:
    addFile: (file) ->
      @files.pushObject file
)

并且模板得到更新：

{{#each file in files}}
  {{{file.preview.outerHTML}}}
{{/each}}

根据 jquery-file-upload 设置（previewCanvas），Ember 要么尝试获取 blob：http 引用，即 404 未找到

previewCanvas: false
...

GET blob:http%3A//localhost%3A3000/8e2869ad-8e44-4701-a56c-a2ad2fdafa07 404 (Not Found)

或者它呈现一个空的 HTML-canvas 元素

previewCanvas: true
...

<canvas width="80" height="45"></canvas><!-- THIS DOES NOT SHOW ANYTHING -->

如果我直接从 jquery 渲染这些，那么一切都会正确显示。

 .on('fileuploadprocessdone', (e, data) ->
   node = data.context.children()
   node.prepend('<br>').prepend(file.preview) if file.preview

我不太明白为什么在使用 jquery 而不是 Ember 插入时这些显示正确。如何使用 Ember 正确显示这些预览？

4

0 回答 0