AngularJS4+Spring Boot上传图片到COS

毕业设计涉及到用户修改个人信息的图像。

首先是上传图片的接口：我这里将用户上传的图片保存到COS中，关于腾讯云的对象存储可以点下面链接了解一下（腾讯云对象存储SDK文档）。

SpringBoot 关于上传的代码：

controller

    @RequestMapping(value = "/img",method = RequestMethod.POST)
    @ResponseBody
    public BaseModel<String> uploadImgQiniu(@RequestParam("file") MultipartFile multipartFile) throws IOException {
        BaseModel<String> res =new BaseModel<>();
        File f = null;
        try {
            f=File.createTempFile("tmp", null);
            multipartFile.transferTo(f);
        } catch (IOException e) {
            e.printStackTrace();
        }
//      图片命名规则
        String imgName = multipartFile.getOriginalFilename();
        String[] arrays=new String[20];
        arrays = imgName.split("\\.");
        String filename = "xynu-computer"+System.currentTimeMillis()+"cl."+arrays[arrays.length-1];
        String path = uploadService.SimpleUploadFileFromLocal(f,filename);
        f.deleteOnExit();
        res.setData(path);
        return res;
    }

service

  //
    public  String SimpleUploadFileFromLocal(File fileInputStream,String name) {
        String etag="https://banner-2253468382.cos.ap-beijing.myqcloud.com";
        // 1 初始化用户身份信息(secretId, secretKey)
        COSCredentials cred = new BasicCOSCredentials("AKID**************", "*******************");
        // 2 设置bucket的区域
        ClientConfig clientConfig = new ClientConfig(new Region("ap-beijing"));
        // 3 生成cos客户端
        COSClient cosclient = new COSClient(cred, clientConfig);
        // bucket名需包含appid
        String bucketName = "banner-123456789";
        String key = "/img/"+name;
        PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName, key, fileInputStream);
        // 设置存储类型, 默认是标准(Standard), 低频(standard_ia), 近线(nearline)
        putObjectRequest.setStorageClass(StorageClass.Standard_IA);
        try {
            PutObjectResult putObjectResult = cosclient.putObject(putObjectRequest);
            // putobjectResult会返回文件的etag
            //etag = putObjectResult.getETag();
        } catch (CosServiceException e) {
            e.printStackTrace();
        } catch (CosClientException e) {
            e.printStackTrace();
        }
        // 关闭客户端
        cosclient.shutdown();
        return etag+key;//返回图片的链接
    }

这里可以通过Postman测试一下接口是否调通：

通过AngularJS4来上传图片

此时上传图片大小最大为1M，如果需要上传更大图片（不超过20M，腾讯云文件上传的接口最大20M）需要配置