springboot2.6.7+vue2前后端分离腾讯云对象存储COS上传文件

时间：2022.6.27往后的版本可能需要更改依赖

• • 后端
  • • 添加pom依赖
    • 在application.yml中添加动态配置
    • 以下为方法示例
    • Entity
    • Controller
    • Service
    • ServiceImpl
  • 前端
  • • 按钮
    • 上传对话框
    • 相关方法

   com.qcloud
   cos_api
   5.6.89


 
 
     cn.hutool
     hutool-all
     5.5.9
 

获取腾讯云的密钥→https://console.cloud.tencent.com/cam/capi
COS地域→https://cloud.tencent.com/document/product/436/6224

spring:
  # 配置文件大小限制
  servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 20MB

cos:
  secretId: 你的SecretId
  secretKey: 你的SecretKey
  regionName: 你的COS地域
  bucketName: 你的命名空间名称

实现方法在完成后返回文件的url，并将文件信息存储至数据库
未做文件类型限制

public class File implements Serializable {

    private String name;

    private String type;

    private Long size;

    private String url;
    
    private Date time;
}

@PostMapping("/upload")
public String upload(MultipartFile file) {
    return fileService.upload(file);
}

String upload(MultipartFile file);

import cn.hutool.core.date.DateUtil;

@Service
public class FileServiceImpl extends ServiceImpl implements IFileService {

	@Resource
	private FileMapper fileMapper;
    @Value("${cos.secretId}")
    private String secretId;
    @Value("${cos.secretKey}")
    private String secretKey;
    @Value("${cos.bucketName}")
    private String bucketName;
    @Value("${cos.regionName}")
    private String regionName;

    @Override
    public String upload(MultipartFile file) {
        // 判断文件类型
        // 获取原始文件名
        String originalFilename = file.getOriginalFilename();
        String type = FileUtil.extName(originalFilename);
        long size = file.getSize();
        // 判断原始文件名
        if (originalFilename == null) {
            throw new ServiceException(Constants.CODE_500, "系统错误");
        }
        // 判断通过上传COS
        String filePath = PathUtils.generateFilePath(originalFilename);
        String url = uploadCOS(file, filePath);
        FileCOS saveFile = new FileCOS();
        saveFile.setName(originalFilename);
        saveFile.setType(type);
        saveFile.setSize(size / 1024);
        saveFile.setUrl(url);
        saveFile.setTime(DateUtil.parse(DateUtil.now()));
        fileMapper.insert(saveFile);
        return url;
    }

    public String uploadCOS(MultipartFile file, String filePath) {
        String key = filePath;
        try {
            // 默认不指定key的情况下，以文件内容的hash值作为文件名
            PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName, key, file.getInputStream(), null);
            // 使用cosClient调用第三方接口
            COSCredentials cred = new BasicCOSCredentials(secretId, secretKey);
            // clientConfig 中包含了设置 region, https(默认 http), 超时, 代理等 set 方法, 使用可参见源码或者常见问题 Java SDK 部分。
            Region region = new Region(regionName);
            ClientConfig clientConfig = new ClientConfig(region);
            // 生成 cos 客户端。
            COSClient cosClient = new COSClient(cred, clientConfig);
            PutObjectResult putObjectResult = cosClient.putObject(putObjectRequest);
        } catch (Exception e) {
            e.printStackTrace();
        }
        //拼接返回路径
        return "https://" + bucketName + ".cos." + regionName + ".myqcloud.com/" + key;
    }
}

• 为前端将文件以formData格式存储，并通过val.raw的方式将数据传给formData对象，axios发送post请求到后端
• 由于action属性为上传的地址里用#号忽略了，需要axios发送至后端的请求有一套完整的上传方法利用前端formData对像传递的文件进行文件的上传

上传文件

  
    
    
将文件拖到此处，或点击上传
    
上传文件
  
  

    取 消
    上 传
  

handleFileUpload(){
  this.dialogOfUpload = true
},
handleChange(file, fileList) { //文件数量改变
  this.fileList = fileList;
},
confirmUpload() { //确认上传
  var param = new FormData();
  this.fileList.forEach(
      (val, index) => {
        param.append("file", val.raw);
      }
  );
  this.request.post("/file/upload", param).then(responce => {});
  this.$message({
    message: "上传成功！",
    duration: 1000
  });
  this.dialogOfUpload = false
  this.load()
},