引言

在现代Web应用中，文件上传是一个常见需求。而将文件存储在云存储服务（如阿里云OSS、AWS S3等）则是一个优雅且高效的解决方案。本文将使用Spring Boot作为后端框架，Vue作为前端框架，演示如何实现文件上传至阿里云OSS服务。

准备工作

在开始之前，确保你已经具备以下准备工作：

• Java开发环境和IDE（如IntelliJ IDEA、Eclipse等）
• Node.js和npm安装
• 阿里云账号，并开通OSS服务
• Vue CLI（用于快速搭建Vue项目）

后端开发：Spring Boot

创建文件上传的工具类UploadUtil.java

代码如下：

package com.wedu.modules.platform.utils;import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import org.apache.commons.io.FilenameUtils;
import org.springframework.web.multipart.MultipartFile;import java.io.IOException;
import java.util.UUID;public class UploadUtil {//阿里域名public static final String ALI_DOMAIN = "https://dh-lovesc.oss-cn-nanjing.aliyuncs.com/";public static String uploadImage(MultipartFile file) throws IOException {//生成文件名String originalFilename = file.getOriginalFilename();String ext = "." + FilenameUtils.getExtension(originalFilename);String uuid = UUID.randomUUID().toString().replace("-","");String filename = uuid + ext;//地域节点String endpoint = "http://oss-cn-nanjing.aliyuncs.com";String accessKeyId = "LTAI5tCWXhVt4nDdpmuecC6B";String accessKeySecret = "OgvFdn2dadJhT3I3Wk6YzbqabpYw0I";//oss客户端对象OSS ossClient = new OSSClientBuilder().build(endpoint,accessKeyId,accessKeySecret);ossClient.putObject("dh-lovesc", filename,file.getInputStream());ossClient.shutdown();return ALI_DOMAIN + filename;}
}

写一个Controller接口进行文件上传：

@PostMapping("/ossFile")public String upload(@RequestParam MultipartFile file) throws IOException {return UploadUtil.uploadImage(file);}

前端

创建vue项目，编写文件上传组件

 <div class="oss-file"><h1>oss上传</h1><el-uploadaction="#"list-type="picture-card":before-upload="uploadfile"><imgv-if="ossImageUrl":src="ossImageUrl"class="avatar"width="100%"/><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload></div>

export default {data() {return {dialogImageUrl: "", //本地图片路径ossImageUrl: "", //oss图片路径minioImageUrl: "", //minio路径};},methods: {uploadfile(file) {// 创建一个 FormData 对象let formData = new FormData();formData.append("file", file);this.$http({method: "post",url: this.$http.adornUrl("/platform/uploadFile/localFile"),headers: {"Content-Type": "multipart/form-data",},data: formData,}).then((response) => {if (response.status === 200) {this.dialogImageUrl = response.data.imageUrl;alert("上传成功");} else {alert("上传失败");}}).catch(() => {});},