网上的案例看了下,感觉可行,就自己改了一部分,补全了一部分,成功上传成功。
后端:
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 {
@Bean
public 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 {
@Autowired
private OSSClient ossClient;
@Override
public 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 < 5
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG/PNG/JPEG 格式!')
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 5MB!')
}
return isJPG && isLt2M
}
}