在做项目的时候,咱们经常会遇到文件上传的需要,例如用户更换头像、上传详情照片等等,这个时候能够将上传的文件存放到项目的根目录下面,然则随着文件的数量的增加,文件会欠好管理并且拜访的速度亦不是火速
因此能够思虑存储空间进行文件的存储。对象存储是面向对象/文件的、海量的互联网存储,它亦能够直接被叫作为“云存储”。对象尽管是文件,它是已被封装的文件(编程中的对象就有封装性的特点),亦便是说,在对象存储系统里,你不可直接打开/修改文件,但能够像ftp同样上传文件,下载文件等
另一对象存储无像文件系统那样有一个非常多层级的文件结构,而是仅有一个“桶”(bucket)的概念(亦便是存储空间),“桶”里面所有都是对象,是一种非常扁平化的存储方式。其最大的特点便是它的对象名叫作便是一个域名位置,一旦对象被设置为“公开”,所有网民都能够拜访到它;它的持有者还能够经过REST API的方式拜访其中的对象
因此呢,对象存储最主流的运用场景,便是存储网站、移动app等互联网/移动互联网应用的静态内容(视频、照片、文件、软件安装包等等)
由于七牛云的对象存储空间是免费的,并且容量亦是相对够用的(因此还是选取白嫖一波吧)
准备工作注册七牛云账号,而后到掌控台中选取存储空间
进去之后点击新建空间,一个空间相当于是一个文件夹,存放对象的位置
创建完成之后能够按照自己的需要是不是绑定域名(绑定的域名必须是备案过的)
点击密钥管理查看自己的密钥,在之后的文件上传和下载中都会用到
代码测试
1、在pom.xml中引入对应的依赖<!-- 七牛云对应依赖 -->
<dependency>
<groupId>com.qiniu</groupId>
<artifactId>qiniu-java-sdk</artifactId>
<version>[7.7.0, 7.10.99]</version>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.5</version>
<scope>compile</scope>
</dependency>
<!-- lombok依赖 -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
2、编写配置application.yml配置文件qiniuyun:
#你的accessKey密钥
accessKey: xxx
#你的secretKey密钥
secretKey: xxx
#存储空间名叫作
bucket: xxx
#外链域名,即空间的默认域名
qiniu-image-domain: xxx
#链接过期时间,单位为秒,-1暗示不外期
expire-in-seconds: -1
3、编写QiNiuUtils工具类@Data
@Component
@ConfigurationProperties(prefix = "qiniuyun")
public class QiNiuUtils {
private String accessKey;
private String secretKey;
private String bucket;
@Value("${qiniuyun.qiniu-image-domain}")
private String QINIU_IMAGE_DOMAIN;
@Value("${qiniuyun.expire-in-seconds}")
private long expireSeconds;
public Auth getAuth(){
return Auth.create(accessKey,secretKey);
}
/*
上传文件到存储空间
*/
public Stringupload(MultipartFile file){//构造一个带指定 Region 对象的配置类
Configuration cfg = new Configuration(Region.huadongZheJiang2());
//...其他参数参考类注释UploadManager uploadManager =new UploadManager(cfg);
Auth auth = getAuth();
String upToken = auth.uploadToken(bucket);
String url = null;
try{
Response response = uploadManager.put(file.getInputStream(), file.getOriginalFilename(), upToken,null,null);
url = QINIU_IMAGE_DOMAIN + JSONObject.parseobject(response.bodyString()).get("key");
//解析上传成功的结果
DefaultPutRet putRet = newGson().fromJson(response.bodyString(), DefaultPutRet.class);
System.out.println(putRet.key);
System.out.println(putRet.hash);//将上传完的照片的外链返回出去
return url;
} catch(Exception ex) {
ex.printStackTrace();
System.err.println(ex.toString());
}return url;
}
/*
查看七牛云存储空间中的所有文件
*/
public void cat(){
//构造一个带指定 Region 对象的配置类
Configuration cfg = newConfiguration(Region.region0());
Auth auth = getAuth();
BucketManager manager =new BucketManager(auth, cfg);
//要查看文件名的前缀
String prefix = "Bicon";
int limit = 1000;
Stringdelimiter ="";
BucketManager.FileListIterator fileListIterator = manager.createFileListIterator(bucket, prefix, limit, delimiter);
while(fileListIterator.hasNext()) {//处理获取的file list结果
FileInfo[] items = fileListIterator.next();
List<FileInfo> fileInfos = Arrays.asList(items);
List<String> collect = fileInfos.stream().map(fileInfo -> {return QINIU_IMAGE_DOMAIN+fileInfo.key;
}).collect(Collectors.toList());
//将所有符合前缀的文件进行表示System.out.println(collect);
}
}/*
获取文件拜访位置
*/
public String fileUrl(String fileName) throws UnsupportedEncodingException {
StringencodedFileName = URLEncoder.encode(fileName,"utf-8");
String publicUrl = String.format("%s/%s", QINIU_IMAGE_DOMAIN, encodedFileName);
Auth auth = getAuth();
long expireInSeconds = expireSeconds;if(-1 == expireInSeconds){
return auth.privateDownloadUrl(publicUrl);
}
returnauth.privateDownloadUrl(publicUrl, expireInSeconds);
}
}4、编写UploadController@RestController
public class UploadController {
//引入刚才写好的工具类
@Autowired
private QiNiuUtils qiNiuUtils;
@RequestMapping("/upload")
@CrossOrigin
public String upload(@RequestParam("file") MultipartFile file) throws IOException {
//获取到上传照片的外链String upload = qiNiuUtils.upload(file);return upload;
}
}5、在vue页面中添加一个上传组件<template>
<!--
on-success:上传成功后调用的办法
action:选中文件之后的请求路径
auto-upload:是否自动上传文件
-->
<el-upload n-success="upload" :action="action" list-type="picture-card" :auto-upload="true">
</template>
<script>
export default{
data(){return{
action: http://localhost:8080/upload
}
}
methods:{
upload(response){
if(response.code==200){
this.formAdd.gimg = response.objthis.$message.success(上传成功!)
}else{
this.$message.error(上传照片失败!)
}
},
}
}
</script>
6、在前端页面中选取文件并查看效果,或能够用API测试工具来进行测试
这儿我运用的是Apifox,大众亦能够用其他的API调试工具
7、查看效果
到这儿,已然实现了简单的将文件上传到七牛云上面啦,这儿的文件上传组件是选中完文件自动上传了,亦能够按照自己的需要变成点击按钮进行上传
|