SpringBoot整合七牛云实现文件上传

4zhvml8

在做项目的时候，咱们经常会遇到文件上传的需要，例如用户更换头像、上传详情照片等等，这个时候能够将上传的文件存放到项目的根目录下面，然则随着文件的数量的增加，文件会欠好管理并且拜访的速度亦不是火速

因此能够思虑存储空间进行文件的存储。对象存储是面向对象/文件的、海量的互联网存储，它亦能够直接被叫作为“云存储”。对象尽管是文件，它是已被封装的文件（编程中的对象就有封装性的特点），亦便是说，在对象存储系统里，你不可直接打开/修改文件，但能够像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、查看效果

到这儿，已然实现了简单的将文件上传到七牛云上面啦，这儿的文件上传组件是选中完文件自动上传了，亦能够按照自己的需要变成点击按钮进行上传