整合阿里云oss

spring部分：

引入依赖：

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

yml文件配置：

sky:
  alioss:
    endpoint: oss-cn-huhehaote.aliyuncs.com
    access-key-id: LTAI5t8sstJkQg1pzrN7DqZ
    access-key-secret: 03P9tiS7zNFl7Lb4YzAW3SUcEKktd
    bucket-name: shigong123

@Component
@ConfigurationProperties(prefix = "sky.alioss")
@Data
public class AliOssProperties {

    private String endpoint;
    private String accessKeyId;
    private String accessKeySecret;
    private String bucketName;
}

/**
 * 配置类，用于创建AliOssUtil对象
 */
@Configuration
public class OssConfiguration {

    @Bean
    @ConditionalOnMissingBean
    public AliOssUtil aliOssUtil(AliOssProperties aliOssProperties){
        return new AliOssUtil(aliOssProperties.getEndpoint(),
                aliOssProperties.getAccessKeyId(),
                aliOssProperties.getAccessKeySecret(),
                aliOssProperties.getBucketName());
    }
}

/**
 * 通用接口
 */
@RestController
@RequestMapping("/common")
public class CommonController {

    @Autowired
    private AliOssUtil aliOssUtil;
    /**
     * 文件上传
     *
     * @param file
     * @return
     */
    @PostMapping("/upload")
    public Result<?> upload(@RequestParam("file") MultipartFile file) {
        try {
            //原始文件名
            String originalFilename = file.getOriginalFilename();
            //截取原始文件名的后缀   dfdfdf.png
            String extension = originalFilename.substring(originalFilename.lastIndexOf("."));
            //构造新文件名称
            String objectName = UUID.randomUUID().toString() + extension;

            //文件的请求路径
            String filePath = aliOssUtil.upload(file.getBytes(), objectName);
            return Result.success(filePath);
        } catch (IOException e) {
            System.out.println("文件上传失败：{}");
        }
        return Result.error("-1", "文件上传失败");
    }
}

@Data
@AllArgsConstructor
public class AliOssUtil {

    private String endpoint;
    private String accessKeyId;
    private String accessKeySecret;
    private String bucketName;

    /**
     * 文件上传
     *
     * @param bytes
     * @param objectName
     * @return
     */
    public String upload(byte[] bytes, String objectName) {

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        try {
            // 创建PutObject请求。
            ossClient.putObject(bucketName, objectName, new ByteArrayInputStream(bytes));
        } catch (OSSException oe) {
            System.out.println("Caught an OSSException, which means your request made it to OSS, "
                    + "but was rejected with an error response for some reason.");
            System.out.println("Error Message:" + oe.getErrorMessage());
            System.out.println("Error Code:" + oe.getErrorCode());
            System.out.println("Request ID:" + oe.getRequestId());
            System.out.println("Host ID:" + oe.getHostId());
        } catch (ClientException ce) {
            System.out.println("Caught an ClientException, which means the client encountered "
                    + "a serious internal problem while trying to communicate with OSS, "
                    + "such as not being able to access the network.");
            System.out.println("Error Message:" + ce.getMessage());
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }

        //文件访问路径规则 https://BucketName.Endpoint/ObjectName
        StringBuilder stringBuilder = new StringBuilder("https://");
        stringBuilder
                .append(bucketName)
                .append(".")
                .append(endpoint)
                .append("/")
                .append(objectName);


        return stringBuilder.toString();
    }
}
前端部分：

form表单

<el-table-column label="图片" >
  <template v-slot="scope">
    <img :src="scope.row.imagesUrl" style="width: 100px; height: 100px;" />
  </template>
</el-table-column>

弹窗部分：

<el-form-item label="图片" :label-width="formLabelWidth" prop="imagesUrl">
  <img
      v-if="form.imagesUrl"
      :src="form.imagesUrl"

       style="max-width: 200px; max-height: 200px;" />
  <el-upload
      action="http://localhost:9090/common/upload"
      :show-file-list="false"
      :before-upload="handleBeforeUpload"
      :on-success="handleSuccess"
  >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</el-form-item>

handleBeforeUpload(file) {
    // 在上传之前的处理，可以进行文件类型、大小等验证
    console.log('文件上传前处理:', file);
    return true; // 返回 true 表示继续上传，返回 false 则停止上传
},
handleSuccess(response, file) {
    console.log('上传成功:', response);
    if (response.code === '0') {
        this.form.imagesUrl = response.data; // 更新图片地址数据

        console.log("321" + this.form.imagesUrl)

    } else {
        this.$message.error('上传失败');
    }
    this.$message.success('文件上传成功！');
},