Journeys end in lovers' meeting.
漂泊止于爱人的相遇。
使用场景：购物网站会涉及到很多图片的展示，存储在服务器很占用资源（个人的一台mac开发既要开发又要扮演服务器），这样开发起来还要考虑路径。想着有没有一种前端上传图片存储，直接返回图片外链来解决。
展示效果：
- 成功后返回值如下：
- 七牛云
前端使用的是upload上传组件，需要仔细看文档
<template>
<div>
<el-form-item label="缩略图" prop="smallModelPhoto">
<el-upload
action="http://upload-z0.qiniu.com"
:accept="accept"
list-type="picture"
:limit=1
:data="uptoken"
:before-upload="beforeAvatarUpload"
:on-remove="handleRemoveChange"
:on-success="handleSuccessChange"
:file-list="formData.smallModelPhoto">
<el-button size="mini" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png/gif文件，且单张不超过10M，缩略图只能传一张</div>
</el-upload>
</el-form-item>
</div>
</template>
<script>
import Config from '../config'
export default {
data() {
return {
accept: "image/jpeg,image/gif,image/png,image/bmp",
formData: {
smallModelPhoto: [],
},
uptoken: {
token: '',
key: ""
}
}
},
methods: {
beforeAvatarUpload(file) {
this.uptoken.key = file.name;
const isLt10M = file.size < 10 * 1024 * 1024;
if (!isLt10M) {
this.$message.error('上传头像图片大小不能超过 10MB!');
}
return isLt10M;
},
handleRemoveChange(file, fileList){
var filelists = [];
fileList.forEach(function (elem) {
var item = {
name: elem.name,
url: Config.qiniu.action + elem.name
}
filelists.push(item);
})
this.formData.smallModelPhoto = filelists;
},
handleSuccessChange(response, file, fileList) { //上传成功后在图片框显示图片
var filelists = [];
fileList.forEach(function (elem) {
var item = {
name: elem.name,
url: Config.qiniu.action + elem.name
}
filelists.push(item);
})
this.formData.smallModelPhoto = filelists;
}
},
mounted: function () {
var that = this;
/**
* 获取七牛云token
*/
that.getUptoken = function () {
that.$http.get("qiniu/getUpToken").then(function (res) {
that.uptoken.token = res.data.data.upToken;
})
}
}
}
</script>
七牛云 Java SDK 属于七牛服务端SDK之一，主要有如下功能：
- 提供生成客户端上传所需的上传凭证的功能
- 提供文件从服务端直接上传七牛的功能
- 提供对七牛空间中文件进行管理的功能
- 提供对七牛空间中文件进行处理的功能
- 提供七牛CDN相关的刷新，预取，日志功能
Maven
<dependency>
<groupId>com.qiniu</groupId>
<artifactId>qiniu-java-sdk</artifactId>
<version>[7.2.0, 7.2.99]</version>
</dependency>
最简单的上传凭证只需要AccessKey，SecretKey和Bucket就可以。
String accessKey = "access key";
String secretKey = "secret key";
String bucket = "bucket name";
Auth auth = Auth.create(accessKey, secretKey);
String upToken = auth.uploadToken(bucket);
System.out.println(upToken); // 把这个upToken传递给前端
整个操作其实不难，需要仔细看文档，还有不明白的问题欢迎留言！
