SpringBoot+Vue+Elementui的项目中实现用户上传图片至云服务器并且返回图片的URL
要实现用户上传图片至云服务器的功能，可以使用 Spring Boot 中的 MultipartFile类和第三方云存储服务，例如阿里云 OSS、七牛云等。下面是一个示例代码，演示如何将用户上传的图片保存到阿里云 OSS，并将图片 URL 保存到 MySQL 数据库中。
首先，创建一个上传文件的接口，用于处理用户上传的图片：
@RestController
@RequestMapping("/api/upload")
public class UploadController {
@Autowired
private OssService ossService;
@PostMapping(value = "/image")
public ResponseEntity<?> uploadImage(@RequestParam("file") MultipartFile file) {
// 上传文件并返回图片在云服务器上的 URL
String url = ossService.uploadFile(file);
// 将图片的 URL 保存到数据库
ImageEntity imageEntity = new ImageEntity();
imageEntity.setUrl(url);
imageRepository.save(imageEntity);
// 返回图片 URL 给前端
Map<String, String> response = new HashMap<>();
response.put("url", url);
return ResponseEntity.ok(response);
}上面的代码中，@RequestParam 注解用于接收上传的文件，ossService 封装了阿里云 OSS 的相关操作，其中 uploadFile()方法可上传文件并返回文件在云服务器上的 URL。此外，创建了一个 ImageEntity 实体类，用于保存图片 URL 到数据库中。最后返回了图片的 URL 给前端。
下面是 OssService类的实现：
@Service
public class OssService {
@Autowired
private OSSClient ossClient;
@Value("${oss.bucketName}")
private String bucketName;
public String uploadFile(MultipartFile file) {
try {
String fileName = UUID.randomUUID().toString() + "-" + file.getOriginalFilename();
InputStream inputStream = file.getInputStream();
Date expiration = new Date(System.currentTimeMillis() + 3600 * 1000); // 过期时间为1小时
PutObjectResult result = ossClient.putObject(bucketName, fileName, inputStream);
if (result != null) {
return "https://" + bucketName + "." + ossClient.getEndpoint().toString() + "/" + fileName;
} catch (IOException e) {
e.printStackTrace();
return null;
}上面的代码中，ossClient 是一个阿里云 OSS 客户端，使用 bucketName指定了要上传到哪个存储桶中。uploadFile()方法中，首先生成一个唯一的文件名，然后将输入流传递给 ossClient 的 putObject()方法，该方法会上传文件并返回结果。最后返回文件在云服务器上的 URL。
最后，我们可以在前端使用图片的 URL 进行展示。例如，使用 element-ui 的 <el-image> 组件：
<el-image :src="imageUrl" />可以在 Vue 组件中发送 Ajax 请求获取后端返回的图片 URL，然后将它保存在 data 中：
<script>
export default {
data() {
return {
imageUrl: ''
methods: {
handleUploadSuccess(res) {