阿里云oss vue
1. Maven依赖-oss
1
2
3
4
5
| <dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
<version>3.8.0</version>
</dependency>
|
2. 将AccessKey写于application.properties
1
2
3
4
5
6
|
aliyun.oss.file.endpoint =
aliyun.oss.file.accessKeyId =
aliyun.oss.file.accessKeySecret =
aliyun.oss.file.bucketName =
aliyun.oss.file.filehost=
|
3. @ConfigurationProperties配置
3.1. Maven依赖
1
2
3
4
5
| <dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-configuration-processor</artifactId>
<optional>true</optional>
</dependency>
|
3.2. 作用于ossUtils类
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| package com.online.edu.eduservice.entity;
import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;
@Component
@ConfigurationProperties(prefix = "aliyun.oss.file")
@Data
public class OssUtils {
private String endpoint;
private String accessKeyId;
private String accessKeySecret;
private String bucketName;
private String filehost;
}
|
4. 文件上传实现-后端
4.1. EduTeacherService
1
| String fileUpload(MultipartFile file);
|
4.2. EduTeacherServiceImpl
返回上传的图片地图用于用户注册时对应头像
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| @Override
public String fileUpload(MultipartFile file) {
String bucketName = ossUtils.getBucketName();
String fileHost = ossUtils.getFilehost();
String endPoint = ossUtils.getEndpoint();
OSS ossClient = new OSSClientBuilder().build(endPoint, ossUtils.getAccessKeyId(), ossUtils.getAccessKeySecret());
if(ossClient.doesBucketExist(bucketName)){
ossClient.createBucket(bucketName);
ossClient.setBucketAcl(bucketName, CannedAccessControlList.PublicRead);
}
InputStream inputStream = null;
try {
inputStream = file.getInputStream();
} catch (IOException e) {
e.printStackTrace();
}
String fileName = file.getOriginalFilename();
String suffix = fileName.substring(fileName.lastIndexOf("."));
String uuid = UUID.randomUUID().toString();
DateFormat format = new SimpleDateFormat("yyyy/MM/dd");
String filePath = format.format(new Date());
String imageUrl = fileHost +"/"+ filePath+ "/"+uuid + suffix;
PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName, imageUrl, inputStream);
ossClient.putObject(putObjectRequest);
String path = "https://"+bucketName+"."+endPoint+"/"+imageUrl;
ossClient.shutdown();
return path;
}
|
4.3. EduTeacherController
文件上传 前端
<form enctype="multipart/form-data" method="post"> <input type="file" name="file"> </form>
上传的文件采用 MultipartFile接收文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| package com.online.edu.eduservice.controller;
import com.online.edu.common.R;
import com.online.edu.eduservice.service.EduTeacherService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import io.swagger.annotations.ApiParam;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
@Api("阿里云文件管理")
@RestController
@RequestMapping("/eduservice/edu-teacher")
@CrossOrigin
public class UploadController {
@Autowired
EduTeacherService eduTeacherService;
@ApiOperation(value = "文件上传")
@PostMapping("/upload")
public R upload(@ApiParam(name = "file", value = "文件", required = true)
@RequestParam("file") MultipartFile file) {
String path =eduTeacherService.fileUpload(file);
if(path!= null) {
return R.ok().data("path", path);
}
else{
return R.error().message("文件上传失败").code(21004);
}
}
}
|
4.4. 测试上传文件
http://localhost:8080/swagger-ui.html
5. 头像上传-前端
5.1. html部分
图标下载
选取默认头像图标，就放在view/edu/teacher/文件夹下
<img src="./back.png"> 显示默认图片
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <el-form-item label="讲师头像">
<!-- 图标-->
<pan-thumb :image="teacherObj.avatar">
<img src="./back.png">
</pan-thumb>
<!-- 按钮 -->
<el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true"
v-text="button">
</el-button>
<!--
v-show：是否显示上传组件
:key：类似于id，如果一个页面多个图片上传控件，可以做区分
:url：后台上传的url地址
@close：关闭上传组件
@crop-upload-success：上传成功后的回调 -->
<image-cropper
v-show="imagecropperShow"
:key="imagecropperKey"
:width="300"
:height="300"
:url="path"
field="file"
@close="close"
@crop-upload-success="cropSuccess"
/>
</el-form-item>
|
5.2. 脚本部分
定义数据
imagecropperShow 控制上传框的出现
imagecropperKey +1 避免点击取消，出现上次上传操作的界面
path 按钮点击事件，提交路径
button 控制按钮文字，添加和更新操作不同
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <script>
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
export default {
components: { ImageCropper, PanThumb },
data() {
return {
imagecropperShow: false,
imagecropperKey: 0,
path: 'http://localhost:8080/eduservice/edu-teacher/upload',
button: '上传头像'
}
},
methods: {
cropSuccess(resData) {
//console.log(resData)
this.imagecropperShow = false
this.imagecropperKey = this.imagecropperKey + 1
//得到图片路径，保存到teacherObj中
this.teacherObj.avatar=resData.path
//console.log(this.teacherObj.avatar)
},
close() {
this.imagecropperShow = false
this.imagecropperKey = this.imagecropperKey + 1
}
}
</script>
|
6. 效果演示