应用qiniu服务器上传文件，与文件的应用
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
第一步后端
首先我们要去qiniu白嫖一个10g的服务器…这一步就不细说了主要是代码部分。
第二步后端
我们在pom中引入如下
<dependency>
<groupId>com.qiniu</groupId>
<artifactId>qiniu-java-sdk</artifactId>
<version>7.7.0</version>
<exclusions>
<exclusion>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.6</version>
</dependency>
第三步后端
然后我们去配置文件中配置qiniu的相关信息
#配置七牛云
qiniu:
#这两个key都是创建好服务器后就回给你的
accessKey: PXEt7Ch7HdlS7MhvA-rpDGNpdhZ9qxlVRLbjgLeI
secretKey: iOBVr8lqLUVEz14I9cQwjb3wwXkgi0FUWasCkrAP
#bucket就是自己创建的空间名
bucket: bookforbook
第四步后端
编写qiniu的工具类型常用的就是上传与删除的两个方法
上传时主要就区分三种上传方式
文中的getName()方法是自己封装的一个获取名字+时间的方法自己可以随心给上传的文件定名字
//七牛云文件上传工具类
//一个面试题 new 对象都在哪里? new的对象和数组都放在堆里
// 基础变量和字符串信息放在栈
@Component //把该工具类注入到spring容器中才能去配置文件取值
@Slf4j
public class QiniuUtils {
//@value,就可以取出yaml文件中写入的数据我们就是要在工具类中用到所以现在yaml中先写好
@Value("${qiniu.accessKey}")
private String accessKey;
@Value("${qiniu.secretKey}")
private String secretKey;
@Value("${qiniu.bucket}")
private String bucket;
@Autowired//自动装载容器中的bean对象
private UploadManager uploadManager;
//像这种公用的代码部分就要尽量封装
public String uploadToken(){
Auth auth = Auth.create(accessKey, secretKey);
return auth.uploadToken(bucket);
}
//根据文件路径上传文件 filePath
public String upload(String filePath,String fileName){
String name = this.getName(fileName);
try {
Response response = uploadManager.put(filePath, name, this.uploadToken());
DefaultPutRet putRet = new Gson().fromJson(response.bodyString(),DefaultPutRet.class);
log.info("文件上传成功==>key:{}<==>hash:{}",putRet.key,putRet.hash);
return name;
} catch (QiniuException e) {
Response r = e.response;
try{
log.error("文件上传失败==>{}",r.bodyString());
}catch (QiniuException ex2){
}
return null;
}
}
//根据字节上传文件
public String upload(byte[] bytes,String fileName){
String name = this.getName(fileName);
try {
Response response = uploadManager.put(bytes, name, this.uploadToken());
DefaultPutRet putRet = new Gson().fromJson(response.bodyString(),DefaultPutRet.class);
log.info("文件上传成功==>key:{}<==>hash:{}",putRet.key,putRet.hash);
return name;
} catch (QiniuException e) {
Response r = e.response;
try{
log.error("文件上传失败==>{}",r.bodyString());
}catch (QiniuException ex2){
}
return null;
}
}
//根据文件流上传文件
public String upload(InputStream stream, String fileName){
String name = this.getName(fileName);
try {
Response response = uploadManager.put(stream, name, this.uploadToken(),null,null);
//解析上传成功的结果
DefaultPutRet putRet = new Gson().fromJson(response.bodyString(),DefaultPutRet.class);
log.info("文件上传成功==>key:{}<==>hash:{}",putRet.key,putRet.hash);
return name;
} catch (QiniuException e) {
Response r = e.response;
try{
log.error("文件上传失败==>{}",r.bodyString());
}catch (QiniuException ex2){
}
return null;
}
}
public void delete(String fileName){
//构造一个带指定Region 对象的配置类
Configuration cfg = new Configuration(Region.region2());
Auth auth = Auth.create(accessKey,secretKey);
BucketManager bucketManager = new BucketManager(auth,cfg);
try{
bucketManager.delete(bucket,fileName);
log.info("删除文件成功!");
}catch (QiniuException ex){
//如果遇到异常说明删除失败
log.error("删除失败==>code{}",ex.code());
log.error(ex.response.toString());
}
}
// 通过文件名配合输出创建时间
public String getName(String fileName){
SimpleDateFormat format = new SimpleDateFormat("yyyyMMddHHmmss");
return format.format(new Date())+fileName;
}
}
这是配置类中自动注入类的具体书写后端
Region的调用一定要根据自己的位置来文中的region2好像是西南地区不同地区region的数字不同
@Configuration
public class BeanConfig {
@Bean //如果项目中有一个常用的公用对象则我们可以把他new出来放入的ioc容器中这就样就不会反复new浪费空间
public UploadManager uploadManager(){
com.qiniu.storage.Configuration cfg = new com.qiniu.storage.Configuration(Region.region2());
return new UploadManager(cfg);
}
}
第六步
我们来到vue中首先在main.js中挂载一个值
//挂载qiniu的数据
Vue.prototype.$qiniu = 'http://romblj8hs.hn-bkt.clouddn.com/';
我们上传到qiniu的图片或者文件都得有这个前缀这里挂载好后后面就好直接调用
第七步
在页面中的显示
在是表格的某一行的代码包含图片标签
<!-- 表格的formatter属性如果给他设置方法它默认会传四个参数分别是row column...拿到参数就可以去调整值的形式-->
<!-- 这边如果要在页面显示上传到七牛的照片格式为$qiniu + scope.row.avatar qiniu是挂载到vue main中的了-->
<el-table-column
label="头像"
>
<template slot-scope="scope">
<el-image style="width:100px;height: 100px"
//这里一定要这样判断一样后端传来的图片值因为图片要么是网络连接要么就是我们上传到服务器的图片两种情况都可显示的情况就像这样书写即可
:src="scope.row.avatar.startsWith('https') ? scope.row.avatar : $qiniu + scope.row.avatar"
//这是e-ui的预览属性可以删除
:preview-src-list="preview(scope.row.avatar)"/>
</template>
</el-table-column>
第八步
然后我们就到了文件上传这一步我们直接去应用e-ui的上传样式
<el-form-item label="用户头像" prop="avatar" >
<!-- action 用户上传地址
show-file-list: 是否展示列表
-->
<el-upload
class="avatar-uploader"
:action="action"
:headers="headers"
:show-file-list="false"
//上传成功后的方法
:on-success="handleAvatarSuccess"
//上传前的方法
:before-upload="beforeAvatarUpload">
//有图片显示图片
<img v-if="imageUrl" :src="imageUrl" class="avatar">
//图片失效就显示i标签
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
在js data中记录这编写这三个变量上文要用到headers中装的是存在仓库中的tokenaction就是去响应的地址响应成功后通过那个方法就可以给imageUrl赋值了然后就把上传成功的图片显示在页面上
imageUrl:null,
action:'/tool/upload',
headers:{
Authorization: sessionStorage.getItem('token')
},
methods中上文的两个方法
handleAvatarSuccess(res,file){
this.imageUrl = this.$qiniu+res.data;
this.form.avatar = res.data;
},
//上传之前 file 可以判断文件类型和文件大小
beforeAvatarUpload(file){
let index = file.name.lastIndexOf('.');
let suffix = file.name.substring(index+1);
if(suffix !== 'jpg' && suffix !== 'png' && suffix !== 'jpeg' ){
this.$message.warning("请上传jpg、jpeg、png格式文件");
return false;
}
第九步
在controller层编写应用之前写好的qiniu工具类的方法即可
//工具控制器
@RestController
@RequestMapping("/tool")
public class ToolController {
@Autowired
private QiniuUtils qiniuUtils;
@PostMapping("/upload")
public Result upload(@RequestBody MultipartFile file) throws IOException {
String url = qiniuUtils.upload(file.getInputStream(), file.getOriginalFilename());
return Result.success("文件上传成功",url);
}
}