前言:
当前兄弟们对“七牛云图片外链”可能比较看重,兄弟们都需要学习一些“七牛云图片外链”的相关资讯。那么小编在网上网罗了一些关于“七牛云图片外链””的相关知识,希望朋友们能喜欢,朋友们一起来学习一下吧!在做项目的时候,我们经常会遇到文件上传的需求,比如用户更换头像、上传详情图片等等,这个时候可以将上传的文件存放到项目的根目录下面,但是随着文件的数量的增多,文件会不好管理并且访问的速度也不是很快
所以可以考虑存储空间进行文件的存储。对象存储是面向对象/文件的、海量的互联网存储,它也可以直接被称为“云存储”。对象尽管是文件,它是已被封装的文件(编程中的对象就有封装性的特点),也就是说,在对象存储系统里,你不能直接打开/修改文件,但可以像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: -13、编写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 String upload(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 = new Gson().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 = new Configuration(Region.region0()); Auth auth = getAuth(); BucketManager manager = new BucketManager(auth, cfg); //要查看文件名的前缀 String prefix = "Bicon"; int limit = 1000; String delimiter = ""; 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 { String encodedFileName = 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); } return auth.privateDownloadUrl(publicUrl, expireInSeconds); }}4、编写UploadController
@RestControllerpublic 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 :on-success="upload" :action="action" list-type="picture-card" :auto-upload="true"></template><script>export default { data(){ return{ action: '; } } methods:{ upload(response){ if(response.code==200){ this.formAdd.gimg = response.obj this.$message.success('上传成功!') }else{ this.$message.error('上传图片失败!') } }, }}</script>6、在前端页面中选择文件并查看效果,或者可以用API测试工具来进行测试
这里我使用的是Apifox,大家也可以用其他的API调试工具
7、查看效果
到这里,已经实现了简单的将文件上传到七牛云上面啦,这里的文件上传组件是选中完文件自动上传了,也可以根据自己的需要变成点击按钮进行上传
标签: #七牛云图片外链