1.打开阿里云网站：https://www.aliyun.com/
2.注册阿里云，最终获取4个参数bucket 名称，endpoint ,Accesskey ID , Access key Secert
3.搭建环境，引入maven依赖
<!-- 阿里云oss依赖 -->
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
</dependency>
<!-- 日期工具栏依赖 -->
<dependency>
<groupId>joda-time</groupId>
<artifactId>joda-time</artifactId>
</dependency>
4.application.properties
#服务端口 server.port=8002 #服务名 spring.application.name=service_oss #环境设置：dev、test、prod spring.profiles.active=dev #阿里云 OSS #不同的服务器，地址不同 aliyun.oss.file.endpoint=oss-cn-beijing.aliyuncs.com aliyun.oss.file.keyid=LTAI4Fi3Vq4jbugiWKrxnxtt aliyun.oss.file.keysecret=32qRznii5mTJCdyq9OimXMxCTiQJdr #bucket可以在控制台创建，也可以使用java代码创建 aliyun.oss.file.bucketname=liuyi202044
5.controller层
@RestController @CrossOrigin @RequestMapping("/eduoss/fileoss") public class OssController { @Autowired private OssService ossService; //上传头像的方法 @PostMapping public R uploadOssFile(MultipartFile file) { //获取上传文件 MultipartFile //返回上传到oss的路径 String url = ossService.uploadFileAvatar(file); return R.ok().data("url",url); } }
6.创建一个工具类
//当项目已启动，spring接口，spring加载之后，执行接口一个方法 @Component public class ConstantPropertiesUtils implements InitializingBean { //读取配置文件内容 @Value("${aliyun.oss.file.endpoint}") private String endpoint; @Value("${aliyun.oss.file.keyid}") private String keyId; @Value("${aliyun.oss.file.keysecret}") private String keySecret; @Value("${aliyun.oss.file.bucketname}") private String bucketName; //定义公开静态常量 public static String END_POIND; public static String ACCESS_KEY_ID; public static String ACCESS_KEY_SECRET; public static String BUCKET_NAME; @Override public void afterPropertiesSet() throws Exception { END_POIND = endpoint; ACCESS_KEY_ID = keyId; ACCESS_KEY_SECRET = keySecret; BUCKET_NAME = bucketName; } }
7.service层
@Service public class OssServiceImpl implements OssService { @Override public String uploadFileAvatar(MultipartFile file) { // 工具类获取值 String endpoint = ConstantPropertiesUtils.END_POIND; String accessKeyId = ConstantPropertiesUtils.ACCESS_KEY_ID; String accessKeySecret = ConstantPropertiesUtils.ACCESS_KEY_SECRET; String bucketName = ConstantPropertiesUtils.BUCKET_NAME; try { // 创建OSS实例。 OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret); //获取上传文件输入流 InputStream inputStream = file.getInputStream(); //获取文件名称 String fileName = file.getOriginalFilename(); //1 在文件名称里面添加随机唯一的值 String uuid = UUID.randomUUID().toString().replaceAll("-",""); // yuy76t5rew01.jpg fileName = uuid+fileName; //2 把文件按照日期进行分类 //获取当前日期 // 2019/11/12 String datePath = new DateTime().toString("yyyy/MM/dd"); //拼接 // 2019/11/12/ewtqr313401.jpg fileName = datePath+"/"+fileName; //调用oss方法实现上传 //第一个参数 Bucket名称 //第二个参数 上传到oss文件路径和文件名称 aa/bb/1.jpg //第三个参数 上传文件输入流 ossClient.putObject(bucketName,fileName , inputStream); // 关闭OSSClient。 ossClient.shutdown(); //把上传之后文件路径返回 //需要把上传到阿里云oss路径手动拼接出来 // https://edu-guli-1010.oss-cn-beijing.aliyuncs.com/01.jpg String url = "https://"+bucketName+"."+endpoint+"/"+fileName; return url; }catch(Exception e) { e.printStackTrace(); return null; } } }
前端部分代码
引入2个组件
<!-- 讲师头像：TODO -->
<!-- 讲师头像 -->
<el-form-item label="讲师头像">
<!-- 头衔缩略图 -->
<pan-thumb :image="teacher.avatar"/>
<!-- 文件上传按钮 -->
<el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
</el-button>
<!--
v-show：是否显示上传组件
:key：类似于id，如果一个页面多个图片上传控件，可以做区分
:url：后台上传的url地址
@close：关闭上传组件
@crop-upload-success：上传成功后的回调
<input type="file" name="file"/>
-->
<image-cropper
v-show="imagecropperShow"
:width="300"
:height="300"
:key="imagecropperKey"
:url="BASE_API+'/eduoss/fileoss'"
field="file"
@close="close"
@crop-upload-success="cropSuccess"/>
</el-form-item>
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
export default {
components: { ImageCropper, PanThumb },
data() {
return {
teacher:{
name: '',
sort: 0,
level: 1,
career: '',
intro: '',
avatar: ''
},
//上传弹框组件是否显示
imagecropperShow:false,
imagecropperKey:0,//上传组件key值
BASE_API:process.env.BASE_API, //获取dev.env.js里面地址
saveBtnDisabled:false // 保存按钮是否禁用,
}
},
created() { //页面渲染之前执行
this.init()
},
watch: { //监听
$route(to, from) { //路由变化方式，路由发生变化，方法就会执行
this.init()
}
},
methods:{
close() { //关闭上传弹框的方法
this.imagecropperShow=false
this.imagecropperKey=this.imagecropperKey+1
},
//上传成功方法
cropSuccess(data) {
this.imagecropperShow=false
//上传之后接口返回图片地址
this.teacher.avatar = data.url
this.imagecropperKey=this.imagecropperKey+1
},
init() {
//判断路径有id值,做修改
if(this.$route.params && this.$route.params.id) {
//从路径获取id值
const id = this.$route.params.id
//调用根据id查询的方法
this.getInfo(id)
} else { //路径没有id值，做添加
//清空表单
this.teacher = {}
}
},
//根据讲师id查询的方法
getInfo(id) {
teacherApi.getTeacherInfo(id)
.then(response => {
this.teacher = response.data.teacher
})
},
saveOrUpdate() {
//判断修改还是添加
//根据teacher是否有id
if(!this.teacher.id) {
//添加
this.saveTeacher()
} else {
//修改
this.updateTeacher()
}
},
//修改讲师的方法
updateTeacher() {
teacherApi.updateTeacherInfo(this.teacher)
.then(response => {
//提示信息
this.$message({
type: 'success',
message: '修改成功!'
});
//回到列表页面 路由跳转
this.$router.push({path:'/teacher/table'})
})
},
//添加讲师的方法
saveTeacher() {
teacherApi.addTeacher(this.teacher)
.then(response => {//添加成功
//提示信息
this.$message({
type: 'success',
message: '添加成功!'
});
//回到列表页面 路由跳转
this.$router.push({path:'/teacher/table'})
})
}
}
}
</script>