使用elementUI上传组件在SpringBoot项目 上传文件到腾讯云对象存储COS

对象存储 COS

对象存储（Cloud Object Storage，COS）是由腾讯云推出的无目录层次结构、无数据格式限制，可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限，无需分区管理，适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。

步骤：

1. 注册腾讯云账号

2. 搜索对象存储

3. 购买资源包

4. 创建存储桶

5.密钥管理拿到自己的密钥

https://console.cloud.tencent.com/cam/capi

6.项目集成

依赖

<dependency>
            <groupId>com.qcloud</groupId>
            <artifactId>cos_api</artifactId>
            <version>5.6.8</version>
 </dependency>

controller  别瞎传

把 secretId

secretKey 

filePath

bucketName 换成自己的

@RestController()
@RequestMapping("/cos")
public class CosFileUplodController {
    // 1 初始化用户身份信息（secretId, secretKey）。
    // SECRETID和SECRETKEY请登录访问管理控制台 https://console.cloud.tencent.com/cam/capi 进行查看和管理
    String secretId = "XDAKIDPgmgQyIPK2XqzwgCVbUBfS8ctyrc8RWM";
    String secretKey = "XDIOGuLK5cw32nMisNfi3A3iAPQDuSyKXa";
    String filePath = "https://ymcc-1319960091.cos.ap-chengdu.myqcloud.com/"; // 文件基础路径
    String bucketName = "ymcc-1319960091"; // 指定文件将要存放的存储桶
    COSCredentials cred = new BasicCOSCredentials(secretId, secretKey);
    // 2 设置 bucket 的地域, COS 地域的简称请参照 https://cloud.tencent.com/document/product/436/6224
    // clientConfig 中包含了设置 region, https(默认 http), 超时, 代理等 set 方法, 使用可参见源码或者常见问题 Java SDK 部分。
    Region region = new Region("ap-chengdu"); // ap-shanghai 表示上海
    ClientConfig clientConfig = new ClientConfig(region);

    @PostMapping("/upload")
    public JSONResult upload(@RequestParam("file") MultipartFile multipartFile) throws IOException {
        String filename = multipartFile.getOriginalFilename();
        // 这里建议设置使用 https 协议
        // 从 5.6.54 版本开始，默认使用了 https
        clientConfig.setHttpProtocol(HttpProtocol.https);
        // 3 生成 cos 客户端。
        COSClient cosClient = new COSClient(cred, clientConfig);

        //这里文件名用了当前时间 防止重复，可以根据自己的需要来写
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
        String[] fileNames= filename.split("\\.");
        String name = fileNames[0]+ sdf.format(new Date())+ filename.substring(filename.lastIndexOf("."), filename.length());
        // 指定文件上传到 COS 上的路径，即对象键。例如对象键为folder/picture.jpg，则表示将文件 picture.jpg 上传到 folder 路径下
        String key = "javaUpload/" + name;
        PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName, key, multipartFile.getInputStream(),null);
        // 执行上传方法
        cosClient.putObject(putObjectRequest);
        // 返回线上地址
        System.out.println(filePath + key);
        return JSONResult.success(filePath + key);
    }
}

7. 页面cv一个上传组件

<el-form-item>
          <template>
            <div>
              <el-upload
                  class="upload-demo" drag
                  action="http://localhost:10010/ymcc/common/cos/upload"
                  :on-success="coshandlePicSuccess"
                  multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              </el-upload>
            </div>
          </template>
 </el-form-item>

8. 写一个上传成功的方法coshandlePicSuccess 把返回的图片地址 赋值给字段 表单提交的时候保存到数据库

 coshandlePicSuccess(res){
			  let picPath = res.data;
        alert("腾讯云上传成功"+ picPath);
        this.addForm.pic = picPath;
      },