AngularJS4+Spring Boot上传图片到COS

浅浅的花香味﹌ 2022-05-30 06:52 148阅读 0赞

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

首先是上传图片的接口：我这里将用户上传的图片保存到COS中，关于腾讯云的对象存储可以点下面链接了解一下（[腾讯云对象存储SDK文档][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测试一下接口是否调通：

![70][]

通过AngularJS4来上传图片

![70 1][]

![70 2][]

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

![70 3][]

[SDK]: https://cloud.tencent.com/document/product/436/6474
[70]: /images/20220530/8e8b3bb9191d4f58be89ac6f2d06f2e0.png
[70 1]: /images/20220530/d3a9528a748f4f5cb8b63d7c14b95ec0.png
[70 2]: /images/20220530/9e884be5294c4d61abd045f03e8f1b7c.png
[70 3]: /images/20220530/3ee7a5a8bc0b48e48eecbca46549e367.png