在vue中使用plupload上传图片到七牛(着重解决moxie is not defined问题)

       在传统的jquery或者原生JS环境下结合plupload上传到七牛的案例就不说了,一搜一大片，这里重点说说使用了vue之后，在vue环境下要保持相同的体验度上传图片到七牛，下面就是搞了接近两天摸索出来的，过程只想MMP，但是还是得到了满意的结果，算是功夫不负苦心人啊（这个过程真的是坑太多了）！

 

       这个排坑的过程就多说了，搞来搞去就是plupload和qiniu的js版本对不上的问题，然后就是各种变量找不到的问题，一部分是参考github上的解决办法解决的，一部分自己调试代码解决，经历不可说不痛苦，唉！

       着重说几点要注意的地方：

1.相对JS的引入，这里没有使用压缩之后的，直接使用的源码，因为要调试啊，不过有了webpack，也可以直接使用源码，因为最终是要打包的，无所谓引用什么，但建议还是引用源码，用了你就知道了：

//这里使用相对路径，就是该文件相对于static目录的路径
window.mOxie = window.moxie = require('../../../static/js/plupload/moxie')
require('../../../static/js/plupload/plupload.dev')
require('../../../static/js/qiniu/qiniu')

2.对应的plupload.dev.js：

注意看版本号：2.3.6，修改源码部分（括号里面的this改成window）：

exports.plupload = plupload;

}(window, moxie));

}));

3.对应的qiniu.js,用的是目前的最新版，等下看js源文件就知道了，在源码里面要加下面这句代码:

mOxie.Env = mOxie.core.utils.Env;

4.最最坑的moxie.js，尼玛就是这个js搞了半天，在这个源码的最后面加上：

window.mOxie = exports.mOxie;

其他的就是使用部分了，还是贴一下，不然文章太短了，哈哈：

vue组件部分

组件的使用（非常简单）：

差不多就是这样了，我把我的static里面的文件打包一份，再传一下就ok了；

下载地址