实现Java+Vue上传图片到七牛云和从七牛云删除图片

环境准备

开发环境
后端: JDK1.8, SpringBoot2.2.2.RELEASE, Maven3.6.3
前端: vue-element-admin4.4.0

相关链接
七牛云JavaSDK
七牛云存储区域域名
Element upload 上传组件文档
Antd Vue form 表单文档

后端操作

前端(客户端上传方式)通过组件上传图片到七牛云, 需要先从七牛云获取token, 这里用Java获取token, 前端拿到token才可以上传图片到七牛云, 删除的时候也是同理, 也需要先有token, 指定文件名称才能删除(上传是在服务端拿到token返回给前端通过前端上传图片, 删除是直接在服务端删除)

添加Maven依赖

<dependency><groupId>com.qiniu</groupId><artifactId>qiniu-java-sdk</artifactId><version>[7.2.0, 7.2.99]</version>
</dependency>

文档

上传文档

删除文档

文档说明, 获取token只需要三个数据 accessKey, secretKey, bucket, 这三个是在七牛云控制台获取, 简单获取的话前三个值可以按照文档直接定义变量写死, 本文中相关数据存储在数据库, 通过创建实体类对象获取 , 删除时还需要文件key值, key值是我们文件的名称, 本文中key通过前端发送post请求带到后端

accessKey, secretKey, bucket 获取, 登录七牛云后台

数据库表

Mybatis自动生成代码, 直接上Controller层…

/*** @author chen* @date 2020-07-12 22:06*/@RestController
@RequestMapping(value = "/api/qiniu")
public class QiNiuController {@Resourceprivate IQiNiuService qiNiuService;@RequestMapping(value = "/get_token", method = RequestMethod.GET)public QiNiu getToken() {QiNiu qiNiu = new QiNiu();long expireSeconds = 600;StringMap putPolicy = new StringMap();// 数据表只有一条数据, 直接拿第一条QiNiuEntity qiniu = qiNiuService.selectAll().get(0);// accessKey = qiniu.getAk()// secretKey = qiniu.getSk()// bucket = qiniu.getBucket()Auth auth = Auth.create(qiniu.getAk(), qiniu.getSk());qiNiu.setToken(auth.uploadToken(qiniu.getBucket(), null, expireSeconds, putPolicy));return qiNiu;}@RequestMapping(value = "/del_file", method = RequestMethod.POST)public String delImg(@RequestBody String key) {//构造一个带指定 Region 对象的配置类Configuration cfg = new Configuration(Region.region0());QiNiuEntity qiniu = qiNiuService.selectAll().get(0);Auth auth = Auth.create(qiniu.getAk(), qiniu.getSk());BucketManager bucketManager = new BucketManager(auth, cfg);try {bucketManager.delete(qiniu.getBucket(), key);} catch (QiniuException ex) {//如果遇到异常，说明删除失败System.err.println(ex.code());System.err.println(ex.response.toString());return "删除失败";}return "删除成功";}
}

前端操作

前置数据:
domain: ‘https://upload-z2.qiniup.com’ // 七牛云的上传地址（华南区）, 根据自己的实际区域配置, 区域对应的地址在文章开头的相关链接
qiniuAddr: ‘http://自己七牛云的图片外链地址’, // 七牛云的图片外链地址
前端内容和操作:
前端是一个带图片的表单, 点击上传图片图片直接上传到七牛云, 提交表单只是提交图片在七牛云的外链地址, 未提交表单时, 图片可以删除…具体还需要什么操作可以自己添加…文章开头留了文档的地址…

外链地址

前端代码

<template><div class="app-container"><div><a-form :form="form" :label-col="{ span: 3, minWidth: 100 }" :wrapper-col="{ span: 8 }" @submit="handleSubmit"><a-form-item label="XX名称"><a-inputv-decorator="['xx_name', { rules: [{ required: true, message: 'xxxx!' }] }]"/></a-form-item><a-form-item label="xx分类"><a-selectv-decorator="['xx_tag',{ rules: [{ required: true, message: 'xxxx!' }] },]"placeholder="xxxx"@change="handleSelectChange"><a-select-option value="AA">AA</a-select-option><a-select-option value="BB">BB</a-select-option></a-select></a-form-item><a-form-item label="上传图片"><el-uploadclass="upload-pic":action="domain":data="qiniuData":on-remove="handleRemove":on-error="uploadError":on-success="uploadSuccess":before-remove="beforeRemove":before-upload="beforeUpload":on-exceed="handleExceed":limit="1":file-list="fileList"list-type="picture"><a-button> <a-icon type="upload" /> 点击上传 </a-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div></el-upload></a-form-item><a-form-item label=" " :colon="false"><a-button type="primary" html-type="submit" class="btn-gutter">提交</a-button><a-button @click="resetForm()">重置</a-button></a-form-item></a-form></div></div>
</template><script>
export default {data() {return {formLayout: 'horizontal',form: this.$form.createForm(this, { name: 'form' }),  // antd vue 的form表单的数据绑定方式loading: false,qiniuData: {key: '', // 图片名字处理token: '' // 七牛云token},domain: 'https://upload-z2.qiniup.com', // 七牛云的上传地址（华南区）qiniuAddr: 'http://自己七牛云的图片外链地址', // 七牛云的图片外链地址uploadPicUrl: '', // 提交到后台图片地址fileName: '',fileList: []};},// 生命周期函数, 挂载后mounted() {this.getQiniuToken();},methods: {handleSelectChange(value) {console.log(value);setTimeout(() => {this.form.setFieldsValue({note: `${value === 'AA' ? 'AA' : 'BB'}!`});}, 100);},// 删除图片handleRemove(file, fileList) {this.$http.post('/api/qiniu/del_file',this.fileName).then(response => {const { status} = response;if (status === 200) {this.fileName = '';this.uploadPicUrl = '';}})['catch'](error => {console.log(error);});},// 文件超出个数限制handleExceed(files, fileList) {this.$message.warning('当前限制选择 1 张图片，如需更换，请删除上一张图片在重新选择！');},// 上传前beforeUpload(file) {const isPNG = file.type === 'image/png';const isJPEG = file.type === 'image/jpeg';const isJPG = file.type === 'image/jpg';const isLt2M = file.size / 1024 / 1024 < 2;if (!isPNG && !isJPEG && !isJPG) {this.$message.error('上传图片只能是 jpg、png、jpeg 格式!');return false;}if (!isLt2M) {this.$message.error('上传图片大小不能超过 2MB!');return false;}this.qiniuData.key = `pic_${new Date().getTime()}_${file.name}`;},uploadSuccess(response, file, fileList) {this.fileName = `${response.key}`;this.uploadPicUrl = `${this.qiniuAddr}/${response.key}`;},uploadError(err, file, fileList) {this.$message({message: '上传出错，请重试！',type: 'error',center: true});},beforeRemove(file, fileList) {// return this.$confirm(`确定移除 ${ file.name }？`);},// 提交数据到后台handleSubmit() {const data = this.form.getFieldsValue();console.log(data);// 自己定义提交内容},// 请求后台拿七牛云tokengetQiniuToken() {this.$http.get('/api/qiniu/get_token').then(response => {const { status} = response;const { token } = response.data;if (status === 200) {this.qiniuData.token = token;}})['catch'](error => {console.log(error);});},// 重置表单resetForm() {this.form.resetFields();}}
};
</script><style>.btn-gutter {display: inline-block;margin-right: 20px;}
</style>

实现Java+Vue上传图片到七牛云和从七牛云删除图片相关推荐

七牛云 Java Web上传图片
本文由黑壳网原创本文来源七牛云 Java Web上传图片 - 黑壳网壳叔搞笑一刻没有对手警官抓到正在赌博的四个人."你们知道这是犯法的吗?"警官向第一个人怒吼道. &quo ...
Java实现七牛云上传下载文件或图片
文章目录写在前面一.准备工作 1.1.为什么选择七牛云? 1.2.七牛云注册二.java操作七牛云对象存储下载 2.1.pom.xml引入依赖 2.2.上传下载具体代码三.具体业务例子(七牛云 ...
Java + Vue 实现的在线考试系统
项目介绍学之思在线考试系统是一款 java + vue 的前后端分离的考试系统.主要优点是开发.部署简单快捷.界面设计友好.代码结构清晰.目前支持web端和微信小程序,能覆盖到pc机和手机等设备. ...
七牛云删除图片接口_Thinkphp连接七牛云存储空间删除图片
关于七牛云的基础知识不做介绍,建议先看看如何上传图片: 下面直接上代码:/** * 删除图片 * @return \think\response\Json */ public function del ...
springboot项目：家庭整理服务管理系统39774（java+VUE+Mybatis+Maven+Mysql）
springboot项目:家庭整理服务管理系统39774(java+VUE+Mybatis+Maven+Mysql) 一.项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + ...
java注解接收上传文件,前台：Input type=file 后台获取文件内容用的是spring注解，当地环境上传图片是好的，发布到服务器上图片读取不到，求大神指点...
当前位置:我的异常网» Java Web开发 » 前台:Input type="file" 后台获取文件内前台:Input type="file" 后台获取文 ...
vue 上传图片视频组件，可拍照选择照片，解决苹果手机拍照旋转问题
vue 上传图片视频组件,可拍照选择照片,解决苹果手机拍照旋转问题参考文章: (1)vue 上传图片视频组件,可拍照选择照片,解决苹果手机拍照旋转问题 (2)https://www.cnblogs. ...
vue上传图片组件编写
点击打开源码 https://github.com/317482454/vue_upload 在线查看地址:http://jqvue.com/demo/vue_upload/demo.html 编写一 ...
跟我学 Java 8 新特性之 Stream 流（七）流与迭代器，流系列大结局
转载自跟我学 Java 8 新特性之 Stream 流(七)流与迭代器,流系列大结局恭喜你们,马上就要学完Java8 Stream流的一整系列了,其实我相信Stream流对很多使用Java的同 ...

实现Java+Vue上传图片到七牛云和从七牛云删除图片

环境准备

后端操作

前端操作

实现Java+Vue上传图片到七牛云和从七牛云删除图片相关推荐

最新文章

热门文章