执行完会自动加载到package.json
引入
// 这种是错误的!!!
import qiniu from 'qiniu-js'
// 这才是对的!
import * as qiniu from 'qiniu-js'
上传
七牛api
主要方法:qiniu.upload()
它的参数有:
file: 文件本体
key: 用文件名就行
token: 就是上面说到的后台从七牛云获取到的 token
putExtra: 看官方文档,我也用不到 https://developer.qiniu.com/kodo/1283/javascript
config: 看官方文档,我也用不到 https://developer.qiniu.com/kodo/1283/javascript
主要参数:file
, key
, token
**代码如下:
const observer = {
next(res){
// 上传成功后
console.log('next: ',res)
},
error(err){
// 失败
console.log(err)
},
complete(res){
console.log('complete: ',res)
}
}
// 1. 通过 .upload 方法获取到 observable 对象
const observable = qiniu.upload(uploadInfo.file, uploadInfo.file.name, res.data, {}, {})
// 2. observable.subscribe 触发上传,之后的回调方法都在 observer 对象中,对应着:成功、失败、完成方法
const subscription = observable.subscribe(observer) // 上传开始
// 3. 当然你也可以取消上传操作
// subscription.unsubscribe() // 上传取消
跟 element-ui 配合实现图片上传
<el-upload>
中的 http-request
是覆盖默认上传方式的方法,所以我们用它
接收的参数是这个 el-upload 对象本身,它的参数有:
看到了没有,那个 file
就是我们需要的东西。
完整代码
<el-upload
action="files.kylebing.cn"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:http-request="uploadFile"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
// 上传方法
uploadFile(uploadInfo){
let fileName = md5(uploadInfo.file.name)+ '.' + uploadInfo.file.type.split('/')[1] //图片用md5重新命名
getQiNiuToken().then(res => {
//console.log('Token:',res)
// 上传文件
const observer = {
next(res) {
// console.log('next...已上传大小,单位为字节:' + res.total.loaded)
// console.log('next...本次上传的总量控制信息,单位为字节:' + res.total.size)
console.log('next...当前上传进度,范围:0~100:' + res.total.percent)
},
error(err) {
console.log(err)
},
complete(res) {
//上传成功后触发。包含文件地址
//上传成功以后会返回key 和 hash key就是文件名了!
console.log('上传图片完成:', res)
}
}
const observable = qiniu.upload(uploadInfo.file, fileName, res, {}, {})
const subscription = observable.subscribe(observer) // 上传开始
// subscription.unsubscribe() // 上传取消
})
.catch(err => {
this.$message.error('获取上传 token 失败')
})
},
// 图片删除
handleRemove(file, fileList) {
console.log(file, fileList);
},
// 图片点击预览
handlePictureCardPreview(file){},
获取token的java代码:
@GetMapping
public String getToken() {
KkQiNiu qiNiu = new KkQiNiu();
String accessKey = "";
String secretKey = "";
String bucket = "";
Auth auth = Auth.create(accessKey, secretKey);
StringMap putPolicy = new StringMap();
putPolicy.put("returnBody", "{\"key\":\"$(key)\",\"hash\":\"$(etag)\",\"bucket\":\"$(bucket)\",\"fsize\":$(fsize)}");
long expireSeconds = 3600;
String upToken = auth.uploadToken(bucket, null, expireSeconds, putPolicy);
return upToken;
}
Pom.xml
<!--QiNiu Start -->
<dependency>
<groupId>com.qiniu</groupId>
<artifactId>qiniu-java-sdk</artifactId>
<version>7.12.1</version>
</dependency>
<dependency>
<groupId>com.squareup.okhttp3</groupId>
<artifactId>okhttp</artifactId>
<version>3.14.9</version>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.5</version>
</dependency>
<dependency>
<groupId>com.qiniu</groupId>
<artifactId>happy-dns-java</artifactId>
<version>0.1.6</version>
</dependency>
<!--QiNiu end-->