Vue上传文件/图片到七牛云
目的:使用 vue 上传文件/图片 到七牛云说明:1、前台使用vue,后台用 java 传递一个 token。2、token : 这个相当于一个密钥。3、简单点说。就不写什么去注册账号,找到 as he ks 啥的,都到这一步,这些都不用说了。第一步:前台1、安装 cnpm install qiniu-js / npm install...
·
目的:使用 vue 上传文件/图片 到七牛云
说明:
1、前台使用vue,后台用 java 传递一个 token。
2、token : 这个相当于一个密钥。
3、简单点说。就不写什么去注册账号,找到 as he ks 啥的,都到这一步,这些都不用说了。
第一步:前台
1、安装 cnpm install qiniu-js / npm install qiniu-js
2、main.js 配置
3、使用
releaseBlog() { //发布博客
var qiniu = require('qiniu-js')
var config = {
useCdnDomain: true,
region: qiniu.region.z0, //华东
};
var putExtra = {
fname: "",
params: {},
mimeType: [] || null
};
var observer = {
next(res){
// ...
},
error(err){
// ...
},
complete(res){
// ...
}
}
var url1 = this.$store.state.frontUrl + "/getToken"
this.$ajax.get(url1)
.then( response => {
//获取 token 和 图片的名称
this.token = response.data.token;
this.key = response.data.key;
//把图片上传到 七牛云
var observable = qiniu.upload(this.$refs.file.files[0], this.key, this.token , putExtra, config)
var subscription = observable.subscribe(observer) // 上传开始
//把数据保存到 后台
var url2 = this.$store.state.frontUrl + "/saveBlog"
this.$ajax.post(url2,JSON.stringify(this.inputBlog))
.then( response => {
})
})
},
这里做两点说明:
1、获取token:很明显,我的第一个 ajax 就是,去后台获取 token 的。后面会给出后台 制作 token的代码。
2、获取上传的文件数据:
2、获取上传的文件数据:
<input type="file" ref="file" accept="image/*" >
this.$refs.file.files[0]
第二步:后台
2-1:maven 依赖
<dependency>
<groupId>com.qiniu</groupId>
<artifactId>qiniu-java-sdk</artifactId>
<version>7.2.11</version>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>com.squareup.okhttp3</groupId>
<artifactId>okhttp</artifactId>
<version>3.3.1</version>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.6.2</version>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>com.qiniu</groupId>
<artifactId>happy-dns-java</artifactId>
<version>0.1.4</version>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
<scope>test</scope>
</dependency>
2-2:java代码
@RequestMapping(value = "/getToken", method = RequestMethod.GET)
public QiNiu getToken() {
QiNiu qiNiu = new QiNiu();
// 这三个 就是 ak sk 和你的 空间名
String accessKey = "";
String secretKey = "";
String bucket = "";
long expireSeconds = 600;
StringMap putPolicy = new StringMap();
Auth auth = Auth.create(accessKey, secretKey);
String upToken = auth.uploadToken(bucket,null, expireSeconds,putPolicy);
qiNiu.setKey(UUID.randomUUID().toString());
qiNiu.setToken(upToken);
return qiNiu;
};
更多推荐
已为社区贡献34条内容
所有评论(0)