实现plupload插件的上传图片预览

之前一直使用这个插件实现上传图片,但是有一个问题一直没有解决,就是上传图片完成之后的预览问题,原先的做法是先上传至服务器,然后再从服务器拿图片来预览,这两天终于把这个功能改善了,实现了先预览再上传至服务器,其中还是踩了几个坑记录下来留给有需要的小伙伴使用。

首先这个插件的API,另外一个解决预览功能的另外(叫插件?还是说这个自带的功能)的Moxie API,其中plupload为我们提供了moxie这个对象,初始化的时候打印一下能看到,如果没有的话就需要自己引入。
我是npm安装的plupload首先需要引入:

import plupload from 'plupload'

然后初始化,事件监听什么的文档或者网上搜一下基本都有,我觉得能够看到这个文章的小伙伴这些都不是问题,主要还是来看看预览图片是怎么实现的,我主要是在filesAdded事件做的处理,先来看代码:

filesAdded (up, files) {
  const moxie = plupload.moxie
  const file = files[0]

  if (file.type === 'image/gif') {
    let fr = new moxie.file.FileReader()
    fr.onload = () => {
      this.imgurl = fr.result
      fr.destroy()
      fr = null
    }
    fr.readAsDataURL(file.getSource())
  } else {
    let preview = new moxie.image.Image()
    preview.onload = () => {
      preview.resize({
        width: 100,
        fit: false
      })
      preview.crop(100, 100)
      this.imgurl = preview.type === 'image/jpeg' ? preview.getAsDataURL('image/jpeg', 80) : preview.getAsDataURL()
      preview.destroy()
      preview = null
    }
    preview.load(file.getSource())
  }
}

这里我只限定了一张图片,所以files是个长度为1的数组,直接取第0项就是需要的文件对象了,moxie是上面说的plupload自带的对象,imgurl预览图片url。
我们先判断文件类型如果是gif就走new moxie.file.FileReader(),其他图片就new moxie.image.Image()这中间preview.resizepreview.crop是裁剪参数,可以注释掉。其他基本都是api上的内容,多看看我觉得就没什么问题了,我踩的主要的坑就是不知道还有moxie这个东西,官方的例子好像也没有表明出来,只是列出了上传文件列表的名字。

其实最主要还是自己的问题,不过实现了就很开心了,又算是做了一个小小的优化吧。

附上一些参考的内容:
plupload API
Moxie API
引入moxie报错

阅读 400

推荐阅读