使用Plupload.js预览图片的问题

Question

使用的Plupload.js插件上传图片

FilesAdded
当文件添加到上传队列后触发监听函数参数：(uploader, files)
uploader为当前的plupload实例对象，files为一个数组，里面的元素为本次添加到上传队列里的文件对象

处理图片的代码：

filesAdded (up, files) {
  const fr = new FileReader()
  // 如果不变成blob对象会报一个说什么readAsArrayBuffer第一个参数是blob的错误，但是用原生input上传不需要变成blob对象，这里很奇怪！
  fr.readAsArrayBuffer(new Blob(files))
  fr.onload = e => {
     this.imgurl = e.target.result
  }
}

这边出来的imgurl是一个 blob:http://localhost:8080/... 这种格式的图片，但是预览失败，图片没有出来，请大佬解答一下！

不过我用<input type="file" >上传里面file的参数是这样子的，能够成功预览图片。

上面 filesAdded 的 files 是这样子的

Answer 1

好像应该问plupload下的图片预览功能，记录了一下这个问题的解决实现plupload插件的上传图片预览，不过为什么上面为什么会预览失败个人觉得可能是这个插件输出的file对象的确是像上面大佬说的被封装过导致失败的吧。

Answer 2

fr.readAsArrayBuffer(new Blob(files))

你写的是files。这是一个数组呀。而且为啥要用这个 FileReader。blob直接URL.createObjectURL() 不好吗？

看你最后一个截图，像是被封装过的对象。看 getNative 和 getSource 的返回值吧。