spring boot + vue实现oss上传功能

在使用 Spring Boot 和 Vue 来实现 OSS 直传功能时，需要分别在前端和后端进行开发。

前端开发
在前端项目中，需要使用 axios 进行文件上传。首先，需要安装 axios：

npm install axios

接着，在需要上传文件的组件中，添加一个文件选择按钮和一个上传按钮，并在组件中定义一个变量用来存储选择的文件：

<template>
  <div>
    <input type="file" ref="fileInput" @change="onFileChange" style="display:none"/>
    <button @click="onUploadClick">上传</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null
    }
  },
  methods: {
    onFileChange(e) {
      this.file = e.target.files[0];
    },
    onUploadClick() {
      this.$refs.fileInput.click();
    }
  }
}
</script>

接着，在上传按钮的 click 事件处理函数中，使用 axios 进行文件上传：

onUploadClick() {
  this.$refs.fileInput.click();
},
onFileChange(e) {
  this.file = e.target.files[0];
  axios.post("/api/upload", this.file, {
    headers: { "Content-Type": "multipart/form-data" }
  }).then(response => {
    console.log(response.data);
  });
}

后端开发
在后端项目中，需要使用 OSS SDK 进行文件上传。首先，需要在项目中引入 OSS SDK，可以使用 Maven 或者 Gradle 进行安装：

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

然后，在配置文件中配置 OSS 的访问信息，包括 endpoint、accessKeyId、accessKeySecret、bucketName。

接着，在 Spring Boot 中配置 OSS 的 Bean：

@RestController
public class UploadController {
    @Autowired
    private OSS ossClient;

    @PostMapping("/api/upload")
    public String upload(MultipartFile file) {
        String objectName = UUID.randomUUID().toString() + "-" + file.getOriginalFilename();
        ossClient.putObject("<your-bucket-name>", objectName, file.getInputStream());
        return "https://<your-bucket-name>.<your-endpoint>/" + objectName;
    }
}

最后，在控制器中使用 OSS 的 Bean 进行文件上传：
详情请看