实现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.resize和preview.crop是裁剪参数，可以注释掉。其他基本都是api上的内容，多看看我觉得就没什么问题了，我踩的主要的坑就是不知道还有moxie这个东西，官方的例子好像也没有表明出来，只是列出了上传文件列表的名字。

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

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