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()

拖拽上传

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

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

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

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

综上，完毕

plupload踩坑小结相关推荐

ASP.NET MVC升级到ASP.NET Core MVC踩坑小结
写在前面 ASP.NET Core是微软新推出的支持跨平台.高性能.开源的开发框架,它的优势不必多说,因为已经说得太多了.当然,现在依然有着数量庞大的系统运行于.NET Framework上,由于有大 ...
Nvidia显卡主机安装Ubuntu系统踩坑小结（Z1-Entry-Tower-G6主机安装Ubuntu-18.04）
目录背景问题和解决方法 1.U盘安装Ubuntu系统时出现花屏和ACPI error问题: 2.安装Ubuntu系统时卡在Ubuntu logo五个圆点加载处: 3.系统安装成功后重启,出现花屏, ...
pytorch criterion踩坑小结
1. 数据类型不匹配: 报错:Expected object of type torch.LongTensor but found type torch.FloatTensor for argumen ...
oracle vm 加载ova,vmware导入ova文件踩坑记小结
问题来源众所周知,所有的网络行为都会产生相应的网络流量,那么所有的网络攻击行为也有其对应的流量特点,那么是否能根据流量特点进而分析出其对应的是什么攻击行为呢? 我在虚拟机上使用vulnhub的靶场环 ...
Android Studio打包~安卓打包踩坑及总结
一..Android Studio,打开自己的项目中的android,点击确定二.点击OK后自动执行右上角大象标志.同步项目与Gradle文件. 三.点击最下面一排的build,可以实时看到进度和报 ...
GitLab CI/CD 因git凭据踩坑
GitLab CI/CD 因git凭据踩坑 [TOC] 1. 问题我在windows上,使用git push到gitlab中的私有项目上(项目是有ci/cd设置的),runner执行时出现403权限 ...
JAVA发布栅格图层_基于 WebGL实现自定义栅格图层踩坑实录
以下内容转载自totoro的文章<WebGL-Y轴翻转踩坑实录> 作者:totoro 链接:blog.totoroxiao.com/webgl-flipY- 来源:blog.totorox ...
sonar覆盖率怎么统计的_实战|Java 测试覆盖率 Jacoco插桩的不同形式总结和踩坑记录(上）...
本文为霍格沃兹测试学院优秀学员关于 Jacoco 的小结和踩坑记录.测试开发进阶学习,文末加群. 一.概述测试覆盖率是老生常谈的话题.因为我测试理论基础不是很好,这里就不提需求.覆盖率等内容,直奔主 ...
mvn exec: java_实战|Java 测试覆盖率 Jacoco插桩的不同形式总结和踩坑记录(下）
本文为霍格沃兹测试学院优秀学员关于 Jacoco 的小结和踩坑记录.测试开发进阶学习,文末加群. 六.注意事项汇总修改 JAVA_OPTS 参数时,如果位置不对,可能造成代理无法启动. java - ...
pytorch .item_从数据到模型，你可能需要1篇详实的pytorch踩坑指南
原创 · 作者 | Giant 学校 | 浙江大学研究方向 | 对话系统.text2sql 熟悉DL的朋友应该知道Tensorflow.Pytorch.Caffe这些成熟的框架,它们让广大AI爱好者 ...

plupload踩坑小结

plupload踩坑小结

plupload踩坑小结相关推荐

最新文章

热门文章