SSM项目文件上传到阿里云

一.创建阿里云存储库

1.登录阿里云 搜索OSS:

2.购买OSS或者试用OSS之后进入管理控制台

3.创建bucket(记住EndPoint,后续SSM要用到):

4.创建AccessKey,并记录(后续SSM要用到)

5.完成存储空间创建

二.SSM文件上传接口编写

1.添加阿里云存储依赖:

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

2.编写文件上传接口:

package com.hl.controller;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;
import java.io.InputStream;
import java.util.UUID;

/**
 * @Author Polaris
 * @Date 2024/2/22
 * @注释
 */
@Controller
@RequestMapping("/file")
public class FileController {
    @RequestMapping("/upload")
    @ResponseBody
    public String upload(MultipartFile file) throws IOException {
        //https://polaris-image.oss-cn-wuhan-lr.aliyuncs.com/cat1.jpg
        //endPoint: oss-cn-wuhan-lr.aliyuncs.com 地域:华中武汉
        String endPoint = "oss-cn-wuhan-lr.aliyuncs.com";
        //用户信息
        String accessKeyId = "LTAI5tDqpAqqkddBMKbSgjYj";
        String accessKeySecret = "q3jIo39Z9jjZGBDlpHMcKGtHUYR2hm";
        //存储空间名称
        String bucketName = "polaris-image";
        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endPoint, accessKeyId, accessKeySecret);
        // 上传文件流。
        InputStream inputStream = file.getInputStream();
        //文件原名
        String fileName = file.getOriginalFilename();
        //生成随机文件名
        fileName = UUID.randomUUID().toString().replace("-", "") + fileName;
        //上传文件流
        ossClient.putObject(bucketName, fileName, inputStream);
        //关闭OSSClient。
        ossClient.shutdown();
        //返回文件路径
        return "https://" + bucketName + "." + endPoint + "/" + fileName;
    }
}

三.Vue+element-UI测试文件上传

<el-upload
      class="avatar-uploader"
// action为接口路径
      action="http://localhost:8080/file/upload"
//是否展示文件列表
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      >
      <img
      v-if="this.imgPath"
      :src="this.imgPath"
      class="avatar"
      />
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

//文件上传成功的回调函数
handleAvatarSuccess2(res) {
      console.log(res);//服务端返回数据
      this.imgPath = res;
},

// 文件上传的前置判断方法
beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
},