POM文件配置

        <dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>3.13.2</version></dependency>

文件上传工具类

（自己改）

public class UploadUtil {//阿里域名,自己改public static final String ALI_DOMAIN = "https://xxxx.oss-cn-guangzhou.aliyuncs.com/";public static String uploadAli(MultipartFile file) throws Exception {//生成文件名称String uuid = UUID.randomUUID().toString();String orgFileName = file.getOriginalFilename();//获取真实文件名称 xxx.jpgString ext = "." + FilenameUtils.getExtension(orgFileName);//获取拓展名字.jpgString fileName = uuid + ext;//例如：xxxx.jpgString endpoint = "http://oss-cn-guangzhou.aliyuncs.com";String accessKeyId = "xxxx";String accessKeySecret = "xxxx";// 创建OSSClient实例。OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);// 上传文件流。ossClient.putObject("xxxx-code", fileName, file.getInputStream());// 关闭OSSClient。ossClient.shutdown();return ALI_DOMAIN + fileName;}
}

控制层

@Controller
public class UploadController {@RequestMapping("/uploadImg")@ResponseBodypublic Object uploadImg(MultipartFile pic) throws Exception {//图片上传到OSSString path = UploadUtil.uploadAli(pic);return path;}@RequestMapping("/uploadImg_ck")@ResponseBodypublic Object uploadImg_ck(MultipartFile upload) throws Exception {Map<String, Object> map = new HashMap<String, Object>();String imagePath = null;if (upload != null && upload.getSize() > 0) {try {//图片保存, 返回路径imagePath = UploadUtil.uploadAli(upload);//表示保存成功map.put("uploaded", 1);map.put("url", imagePath);} catch (Exception e) {e.printStackTrace();map.put("uploaded", 0);Map<String, Object> mm = new HashMap<String, Object>();mm.put("message", e.getMessage());map.put("error", mm);}}return map;}

使用yaml配置文件（第二种用法，看公司要求）

（只是写法稍微改了点）
(自己改)

aliyun:oss:endpoint: oss-cn-shanghai.aliyuncs.comaccess-key-id: your_access_key_idaccess-key-secret: your_access_key_secretbucket-name: your_bucket_name

注入 OSSClient 对象及工具类（第二种用法，看公司要求）

@Configuration
public class AliyunConfig {@Value("${aliyun.oss.endpoint}")private String endpoint;@Value("${aliyun.oss.accessKeyId}")private String accessKeyId;@Value("${aliyun.oss.accessKeySecret}")private String accessKeySecret;@Beanpublic OSSClient ossClient() {return new OSSClient(endpoint, accessKeyId, accessKeySecret);}
}

public class UploadUtil {private final OSSClient ossClient;public static final String ALI_DOMAIN = "https://xxxx.oss-cn-guangzhou.aliyuncs.com/";public static String uploadAli(MultipartFile file) throws Exception {String uuid = UUID.randomUUID().toString();String orgFileName = file.getOriginalFilename();String ext = "." + FilenameUtils.getExtension(orgFileName);String fileName = uuid + ext;// 创建OSS实例。OSS oss = new OSSClientBuilder().build(ossClient.endpoint, ossClient.accessKeyId, ossClient.accessKeySecret);// 上传文件流。oss.putObject("xxxx-code", fileName, file.getInputStream());// 关闭OSSClient。oss.shutdown();return ALI_DOMAIN + fileName;}
}

使用 Vue 前端代码实现文件上传

<template><div><form><input type="file" ref="fileInput" @change="uploadFile"/></form></div>
</template>

<script>
import axios from 'axios';export default {methods: {async uploadFile() {const file = this.$refs.fileInput.files[0];const formData = new FormData();formData.append('file', file);try {const response = await axios.post('/api/upload', formData);console.log(response.data);} catch (error) {console.error(error);}}}
};
</script>

在上面的代码中，我们使用了 Vue 的模板语法创建了一个文件选择控件。在选择文件时，我们会调用 uploadFile 方法。

在 uploadFile 方法中，我们使用了 Axios 来发送请求到后端，并使用 FormData 对象封装文件。请求成功后，我们会在控制台中输出服务器返回的结果。

什么是Axios

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js。它可以用来发送 HTTP 请求，例如 GET、POST、PUT 和 DELETE 等。Axios 的 API 设计简单易用，而且支持同步和异步请求。

与传统的 jQuery AJAX 方法不同，Axios 更加现代化，并且它使用了 Promise 语法，因此请求代码更加简洁易读。此外，Axios 还支持拦截器、自动转换 JSON 响应、自动发送 cookie 等功能。

如果需要在 Vue 项目中发送 HTTP 请求，Axios 是一个非常好的选择。

如有错误，还请多多指教！
转载或者引用本文内容请注明来源及原作者：橘足轻重；