plupload踩坑小结

plupload踩坑小结

最近项目需要做上传，刚好是传到七牛云的，那挑选plupload是再适合不过的了。
不过东西是好东西，但毕竟不是自己写的，总会有些坑爹的地方，以下总结几点：

关于上传七牛云

上传到七牛云其实不需要用它官方的js sdk，直接用plupload。但是要记得，七牛上传是要配置token的。为了不必要的麻烦，最好要求后端做个获取配置的接口。

官方的接口例子是这样的

但其实我们需要的是：

• 上传的地址url
• token（这个放到multipart_params附加参数里提交就好了）
• 上传完成之后的拼接主机地址（七牛返回的是上传好的文件名和hash，拼上主机地址就可以访问了）

这个按照前后端合作的实际处理即可。
另外，关于文件路径的问题，七牛上传是不区分目录的，如果项目有这个需求，且为了防止重复文件 ，可在multipart_params中定义key为 ” 目录/自定义文件名.文件后缀 “，上传后拼接上主机地址，可实现类似目录的效果。
如下：

// 部分插件的配置
{
    url: '后端返回的上传地址',
    multipart_params: {
        token: '后端返回的token',
        key: '自定义目录和文件名'
    }
}

// 七牛上传返回数据
{
    hash: "FiVoPM1B9Yixx4lfVMqOSOhqAYhK",
    key: "自定义目录/自定义文件名.文件后缀"
}

//上传后的地址
'后端返回的主机地址' + key

图片预览

网上搜索的结果绝大部分都是同一个demo，但有个问题，新版本的中已经把 mOxie 改为 moxie，运行的时候很多人会遇到报错，没搞懂的时候被逼用回就版本。其实稍微修改一点点即可。

new mOxie.FileReader()
// 改为
new moxie.file.FileReader()

new mOxie.Image()
// 改为
new moxie.image.Image()

拖拽上传

这个的坑爹之处在于拖拽区域没做点击事件绑定，要知道很经常我们是拖拽上传和点击上传做一起的…囧…翻了一下源码，想了两个实现方案。

1. 触发上传按钮自身绑定的点击事件。官方的实现貌似是有一套不插入页面的dom元素，通过操作这些元素实现上传的功能，这个时候最简单的做法就是利用已有的事件绑定触发选择文件即可。切记，这个事件用的是原生js的事件绑定，如果你用了jquery选择器，那么触发的时候直接就是 $(‘上传按钮’)[0].click()
2. 同上，但是为了通用，可以选择源码修改支持。不过不建议，他们开发团队不可能没想到这个问题，之所以没加上去，估计是为了普遍适用，只在有需要的地方处理即可。

多文件上传
多文件上传有两个问题

1. 文件可以选超过数量。这个实际有点蛋碎，不过很好解决，在 FilesAdded 中检测文件长度，超出的用实例的splice方法移除多余文件即可。
2. 进度条。官方文档文字有点太多，稍不留意就会忽略了这点。进度条的处理，建议使用实例的total.percent属性做显示，如果是监听单文件的，会出现很神奇的变化~

综上，完毕

---