总结前台和后台上传图片到阿里云OSS。
前台
在根目录中写一个request的js文件,封装请的地址
import axios from "axios";
const service = axios.create({
baseURL: 'http://localhost:8083/',
timeout: 10000
})
// 把service导出
export default service
在src下的api中写一个请求的js 如写一个uploadphoto.js:
import request from '../utils/request'
const group_name = 'photo'
let data = {
setphoto(params){
return new request({
url:`${group_name}/setphoto`,
data:params,
method:'post',
})
}
}
export default data
再写一个组件,用于测试图片上传。
formData 可以把文件写成二进制,并且封装起来,传送给后台。
<template>
<div>
<br /><br /><br /><br /><br />
<el-upload
class="avatar-uploader"
action="#"
:http-request="setphoto"
:auto-upload="true"
:show-file-list="false"
>
<i class="el-icon-plus avatar-uploader-icon">上传学号对应的图片</i>
</el-upload>
<br /><br /><br /><br /><br />
<input type="text" v-model="number" />
<h2>学号:{{ number }}</h2>
</div>
</template>
<script>
import setphoto from "@api/uploadPhoto"
export default {
data() {
return {
number: "请输入学号",
};
},
methods: {
setphoto(params) {
let formData = new FormData();
formData.append("multipartFile", params.file);
formData.append("number", this.number);
setphoto.setphoto(formData);
console.log(params.file);
},
},
};
</script>
后台
在utils中写SssUtils工具
如:
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
public class OssUtil {
private static String accessKeyId = "在自己的云端查看accessKeyId ";
private static String accessKeySecret = "在自己的云端查看accessKeySecret ";
private static String endpoint = "自己的服务器地址";
public static OSS getOssClient(){
return new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
}
}
service中写上传图片的接口和实现类
接口:
import org.springframework.web.multipart.MultipartFile;
public interface SetPhotoService {
void SetPhoto (MultipartFile multipartFile, Integer number);
}
实现类:
@Service
public class SetPhotoServiceImpl implements SetPhotoService {
private static String urlPrefix = "云服务器地址";
@Resource
MydetailsMapper mydetailsMapper;
@Override
public void SetPhoto(MultipartFile multipartFile, Integer number) {
OSS ossClient = OssUtil.getOssClient();
Calendar calendar = Calendar.getInstance();
String imagePath = calendar.get(Calendar.YEAR) +
"/" + StringUtils.leftPad(String.valueOf(calendar.get(Calendar.MONTH) + 1), 2, '0')+
"/" + StringUtils.leftPad(String.valueOf(calendar.get(Calendar.DAY_OF_MONTH)), 2, '0')+
"/" + UUID.randomUUID().toString() + "." + multipartFile.getOriginalFilename().split("\\.")[1];
try {
PutObjectRequest putObjectRequest = new PutObjectRequest("ngyst",imagePath,new ByteArrayInputStream(multipartFile.getBytes()));
ossClient.putObject(putObjectRequest);
} catch (IOException e) {
e.printStackTrace();
}finally {
ossClient.shutdown();
}
String mypicture = urlPrefix+imagePath;
mydetailsMapper.updatePhoto(mypicture,number);
System.out.println(number+"---------"+mypicture);
}
}
在实现类中上传了图片并且把地址写在了数据库对应的属性中。
在controller中写对应前台的mapper路径和方法:
@RestController
@RequestMapping("photo")
public class SetPhotoController {
@Resource
private SetPhotoServiceImpl setPhotoService;
@RequestMapping("setphoto")
public void setphoto(MultipartFile multipartFile, Integer number){
setPhotoService.SetPhoto(multipartFile,number);
}
}