2019-01-29 vue 七牛云上传文件步骤及问题汇总

官方API文档：https://developer.qiniu.com/kodo/sdk/1283/javascript
步骤：
1、前台使用vue，后台传递一个 token。
2、token ： 这个相当于一个密钥。

npm安装：npm install qiniu-js

代码实现：

这里有个我基于vue+ivew封装的七牛上传组件可以参考：
https://www.jianshu.com/p/99cc99d468a4

JQ单页面实现demo

所参考的文献：
使用JS-SDK上传图片（文件）到七牛：
https://blog.csdn.net/zm06201118/article/details/80537558
Vue上传文件/图片到七牛云：
http://www.xdx97.com/#/single?bid=d83cde48-75e1-7ef7-8256-cea092850ef8
带你玩转七牛云存储——高级篇
https://m.imooc.com/article/37162
Vue2.0利用vue-resource上传文件到七牛
https://segmentfault.com/a/1190000008479698

遇到的问题：

1.运行提示o.upload.addEventListener is not a function
解决方案:(此方法不是根本解决办法，问题3的解决办法是最终解决方案)
找到node_modules/mockjs/dist/mock.js 第8308行
找到node_modules/mockjs/src/xhr/xhr.js 第216行(确保在生产模式下打包出来的代码正常使用。)
添加代码： MockXMLHttpRequest.prototype.upload = xhr.upload;
参考文章：https://github.com/nuysoft/Mock/issues/127

2.上传文件链接返回提示 no such bucket
这是后端给你的token有问题，让后端去设置一下正确的bucket再生成token给你
参考文章：https://developer.qiniu.com/kodo/sdk/1239/java

image.png

3.上传文件过程报错cannot read property 'total' of null（文件能传成功，无法获取执行成功回调，跑error回调去了）
在Mock官方看到了这句话：

image.png

这是由于vue-cli中的mockjs模块全局使用了MockXMLHttpRequest，而七牛sdk本身使用的是XMLHttpRequest按照标准来的，但是vue-cli中的mockjs模块把XMLHttpRequest覆盖拦截了，会导致对象属性访问不到，删除mockjs模块即可。
解决方法：npm uninstall mockjs 删除该模块依赖
参考文章: https://github.com/nuysoft/Mock/issues/301