vue 七牛云上传文件步骤及问题汇总

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

npm安装：npm install qiniu-js

 

 

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

 

3.上传文件过程报错cannot read property 'total' of null（文件能传成功，无法获取执行回调）
这是由于vue-cli中的mockjs模块全局使用了MockXMLHttpRequest，而七牛sdk本身使用的是XMLHttpRequest按照标准来的，但是vue-cli中的mockjs模块硬是把XMLHttpRequest自己封装一下导致冲突，会导致对象属性访问不到，删除mockjs模块即可。
解决方法：npm uninstall mockjs 删除该模块依赖
参考文章:https://github.com/nuysoft/Mock/issues/301

作者：追寻1979
链接：https://www.jianshu.com/p/b28fbab95b5a
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。