问答

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

作者:admin 2021-09-23 我要评论

使用的Plupload.js插件上传图片 FilesAdded 当文件添加到上传队列后触发监听函数参数:(uploader, files) uploader为当前的plupload实例对象,files为一个数组,...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

使用的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的参数是这样子的,能够成功预览图片。
image.png

上面 filesAddedfiles 是这样子的
image.png

###

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

###

fr.readAsArrayBuffer(new Blob(files))

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

看你最后一个截图,像是被封装过的对象。看 getNativegetSource 的返回值吧。

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 使用Plupload.js预览图片的问题

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

  • ant-design-vue-pro运行是报错

    ant-design-vue-pro运行是报错

  • vue 虚拟DOM patch算法

    vue 虚拟DOM patch算法

  • typescript 如何判断一个数组某一个值

    typescript 如何判断一个数组某一个值

腾讯云代理商
海外云服务器