Spring Boot+Vue+阿里云OOS实现图片上传

网上的案例看了下，感觉可行，就自己改了一部分，补全了一部分，成功上传成功。

后端：

pom引入：

        <dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>3.15.2</version></dependency>

配置文件：

endPoint在你创建好的bucket的概览里面可以找到，accessKeyId和secretAccessKey是在授权管理里面生成

import com.aliyun.oss.OSSClient;
import com.aliyun.oss.OSSClientBuilder;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;@Configuration
public class OssClientConfig {@Beanpublic OSSClient createOssClient() {return (OSSClient)new OSSClientBuilder().build("你的对外访问的endPoint","你的accessKeyId","你的secretAccessKey");}
}

service：

import com.aliyun.oss.OSSClient;
import com.atguigu.ggkt.exception.GuiguException;
import com.atguigu.ggkt.vod.service.IOssService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;import java.io.IOException;
import java.time.LocalDate;
import java.util.UUID;@Service
public class IOssServiceImpl implements IOssService {@Autowiredprivate OSSClient ossClient;@Overridepublic String upload(MultipartFile file) {String bucketName = "你创建的bucket的名字";try {String objectName = getBucketName(file.getOriginalFilename());// 创建PutObject请求。ossClient.putObject(bucketName, objectName, file.getInputStream());return "https://" +bucketName+"."+ ossClient.getEndpoint().getHost() + "/" + objectName;} catch (IOException e) {throw new GuiguException(400,"上传失败");}}//图片格式，可以自己加private static final String[] imageExtension = new String[]{ ".jpg", ".jpeg",  ".png"};private String getBucketName(String url) {String ext = "";for(String extItem:imageExtension){if(url.contains(extItem)){ext = extItem;break;}}//日期将作为文件夹名，每天的图片会存到当天的文件夹内//文件名为uuid值return LocalDate.now() +"/"+ UUID.randomUUID() +ext;}
}

controller:

    @PostMapping(value = "/upload")@ApiOperation("上传")public Result upload(@RequestParam("file") MultipartFile file, HttpServletRequest req)  {return Result.ok(ossService.upload(file)).message("文件上传成功");}

用postman测试了一下：

{"code": 20000,"message": "文件上传成功","data": "https://xxxx-xxxxx.oss-cn-guangzhou.aliyuncs.com/2022-11-09/f845560f-6c95-41d4-8d85-e31deae3780c.png"
}

前端：

action的值就是上传的api接口

      <el-form-item label="讲师头像"><el-upload:show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload":on-error="handleAvatarError":action="BASE_API+'/admin/vod/teacher/upload'"class="avatar-uploader"><img v-if="teacher.avatar" :src="teacher.avatar"><i v-else class="el-icon-plus avatar-uploader-icon" /></el-upload></el-form-item>

methods: {// 上传成功回调handleAvatarSuccess(res, file) {// console.log(res)if (res.code === 20000) {// console.log(res)this.teacher.avatar = res.data// 强制重新渲染this.$forceUpdate()} else {this.$message.error('上传失败 （非0）')}},// 错误处理handleAvatarError() {console.log('error')this.$message.error('上传失败（http失败）')},// 上传校验beforeAvatarUpload(file) {const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'const isLt2M = file.size / 1024 / 1024 < 5if (!isJPG) {this.$message.error('上传头像图片只能是 JPG/PNG/JPEG 格式!')}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 5MB!')}return isJPG && isLt2M}}

Spring Boot+Vue+阿里云OOS实现图片上传相关推荐

使用阿里云的OSS图片上传，这里是用的上传网络流
使用阿里云的OSS图片上传,这里是用的上传网络流思路: /** 文件上传到OSS 上传网络流以下代码用于上传网络流: 1.通过element的el-upload插件,通过action发送请求到后台 ...
使用阿里云OSS实现图片上传案例
文章目录前言一.OSS是什么? 二.使用步骤 1.开通OSS服务 2.创建bucket 3.创建子账户 4.查看帮助文档,编写后端代码 5.layui前端总结前言在正式的开发环境中,类似图片 ...
Typora + Picgo + 阿里云oss实现图片上传
Typora + Picgo + 阿里云oss实现图片上传设置原因 Typora是一款markdown文本编辑器,无法承载本地图片存储的功能,书写好的文章上传到博客或其他设备上时会导致图片丢失,无法 ...
Typora+PicGo+阿里云OSS实现图片上传功能
烦恼 Typora是最好用的markdown语法的工具之一:平时做笔记都是使用这个工具,免费,简洁好用,用上之后就爱上了.但是它默认图片是放在本地的.为了用好这个工具,也是经历了一打怪之旅. 开始不做 ...
记录vue+饿了么整合阿里云oss 实现图片上传保存到MySQL 前台回显
vue代码查看图片上一张下一张前后切换图片的实现 <el-table-column label="头像" width="100" align=&quo ...
vue+天翼云OOS文件存储+上传进度条
在使用天翼云文件存储时,发现官方文档里写的不太多.网上相关的资料也很少,关于上传进度条的更是几乎没有.跟官方的技术人员对接后,整理前端使用教程如下: 在public文件夹下放置天翼云OOS的js文件, ...
Spring boot上传文件（图片）到阿里云OSS（直接上传到应用服务器）
Spring boot上传文件(图片)到阿里云OSS(直接上传到应用服务器) 主要思路上传图片的思路有两种: 第一种是上传到应用服务器,再由应用服务器上传到OSS.这种适合上传的文件较小,较为简单, ...
Spring Boot集成阿里云视频点播服务的过程记录
阿里云视频点播效果预览视频点播视频点播概述功能优势流程环境准备开通视频点播创建RAM用户并授权上传SDK 上传流程下载上传SDK 安装上传SDK 集成Java上传SDK 异常说明 ...
spring boot 整合阿里云oss上传
Spring Boot 整合阿里云OSS上传 OSS申请和配置 1. 注册登录 2.开通以及配置 springboot整合使用 1. 进入我们springboot的项目中,导入oss相关依赖 2. ...

Spring Boot+Vue+阿里云OOS实现图片上传

Spring Boot+Vue+阿里云OOS实现图片上传相关推荐

最新文章

热门文章