springboot+vue项目之使用腾讯云实现图片上传

m0_53773988

已于 2023-12-30 15:49:51 修改

阅读量523

点赞数 9

分类专栏： springboot+vue项目文章标签：腾讯云 java spring boot vue

于 2023-12-30 15:48:10 首次发布

本文链接：https://blog.csdn.net/m0_53773988/article/details/135305361

版权

springboot+vue项目专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、实现逻辑

首先创建一个COSClient 实例用于后续的调用请求，然后通过前端发送PostMapping请求实现图片上传功能。因使用的都是第三方腾讯云，所以代码都参考的官方Api，也可以自行查看官网对象存储上传对象-SDK 文档-文档中心-腾讯云进行配置。同时，可自行申请一个腾讯云账号使用。

二、具体实现之基础准备

1、导入腾讯云的依赖

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

2、统一响应模型R.java

/**
 * @Desc 统一响应模型9
 */
@Getter
@Setter
public class R<T>{
    private Integer code;
    private String msg;
    private T data;


    public synchronized static <T> R<T> build(AckCode statusEnum) {
        return build(statusEnum, null);
    }

    public synchronized static <T> R<T> build(AckCode ackCode, T data) {
        R<T> res = new R<>();
        res.setCode(ackCode.getCode());
        res.setMsg(ackCode.getMsg());
        res.setData(data);
        return res;
    }

    public synchronized static <T> R<T> build(AckCode ackCode, T data, String msg) {
        R<T> res = new R<>();
        res.setCode(ackCode.getCode());
        res.setMsg(msg);
        res.setData(data);
        return res;
    }

    public synchronized static <T> R<T> ok() {
        return build(AckCode.SUCCESS, null);
    }

    public synchronized static <T> R<T> okHasData(T data) {
        return build(AckCode.SUCCESS, data);
    }

}

3、返回消息枚举

/** 返回消息内容枚举
 */
@NoArgsConstructor
@AllArgsConstructor
public enum AckCode {

        /**
         * 通用提示
         **/
    COMMON_FRE_OPERATION(203, "服务器频繁,请重试"),
    RATE_LIMATE(201,"访问过于频繁，请稍候再试"),
    DATABASE_ERROR(204,"数据库操作失败"),
    JSON_CONVERT_ERROR(205,"JSON序列化失败"),
    VALIDATE_UNIQUE_ERROR(206,"数据唯一性的验证错误"),

    /*-----Basic-----*/
    SUCCESS(200, "ok"),
    EXISTS_VALUE(506,"该值已被使用"),
    EXISTS_VALUE_ACCOUNT(507,"账户已被使用"),
    EXISTS_VALUE_EMAIL(508,"邮箱已被使用"),
    EXISTS_VALUE_PHONE(509,"手机号已被使用"),

    FAIL(500, "fail"),
    SYSTEM_PARAM_FAIL(400, "参数错误"),
    SYSTEM_TOKEN_FAIL(401, "会话无效，请重新登录"),
    SYSTEM_SIGNATURE_FAIL(402, "签名错误"),
    SYSTEM_DATA_FAIL(500, "系统数据异常"),
    SYSTEM_SERVER_BUSY(501, "服务器繁忙"),
    SYSTEM_SERVER_MAINTAINING(503, "系统维护中"),
    NOT_FOUND_DATA(504, "查询不到数据"),
    NO_PERMISSION_TO_ACCESS(505, "只有管理员才有访问该请求的权限"),
    PERMISSION_NOT_NULL(506,"RequiredPermission权限标识不允许为空"),
    PERMISSION_NOT_ACCESS(507,"没有权限访问该接口"),
    PERMISSION_NOT_STATE_EDIT(508,"没有权限修改用户状态"),
    PERMISSION_NOT_PASSWORD_EDIT(508,"没有权限修改密码"),
    PERMISSION_NOT_ACCESS_CATEGORY(509,"没有权限访问其它商家的数据"),

    /*--------------------文件-----------------*/
    FILE_NOT_EXIST(800, "文件不存在"),
    FILE_UPLOAD_OSS_TOKEN_ERROR(801, "获取上传令牌失败"),
    UPLOAD_TYPE_ERROR(802, "上传文件类型有误"),
    UPLOAD_TYPE_ERROR_IMAGE(802, "上传文件类型有误，支持的图片格式包括\"JPG\", \"JPEG\", \"PNG\" "),
    UPLOAD_FILE_NAME_ERROR(803, "上传文件名称有误"),
    UPLOAD_FILE_CORRUPTED(804, "文件损坏，请重新上传"),
    UPLOAD_PHOTO_LIMIT(805, "照片最多上传5张"),
    UPLOAD_VOICE_LIMIT(806, "语音时长太短"),
    FILE_NOT_EMPTY(807, "文件不能为空"),
    UPLOAD_IMAGE_SIZE_LIMIT(808, "图片大小不能超过1MB"),
    DOWNLOAD_FILE_ERROR(809,"文件下载失败"),
    UPLOAD_FILE_ERROR(810,"文件上传失败"),


    private Integer code;

    private String msg;

    /**
     * 获取所有回复码
     *
     * @return
     */
    public static LinkedHashMap<Integer, String> getArrayMessage() {
        LinkedHashMap<Integer, String> responseMessages = new LinkedHashMap<>();
        for (AckCode statusEnum : AckCode.values()) {
            responseMessages.put(statusEnum.code, statusEnum.msg);
        }
        return responseMessages;
    }

    public Integer getCode() {
        return code;
    }


    public String getMsg() {
        return msg;
    }


}

4、常量类 MarketConstans.java(用于腾讯云对象存储服务器地址)

public interface MarketConstans {
     /**
     *腾讯云对象存储服务器地址，可替换成自己的地址
     */
String TENCENT_IMAGE_SERVICE=url;
}

具体操作简述一下：创建好账号后可以自己搜索存储桶进行创建，例如我就自己创建了一个

springboot-market的存储桶，然后就可以生成一个存储桶名称，以及存储服务地址。如下图所示：

图2-4-1存储桶名称及域名位置

5、新建COSClient实例时需要使用到ID和密钥

ID需要新建的时候才能看见，所以需要复制下来，具体位置见下图：

图2-5-1 ID和密钥的位置

注：一个账号限免时只能新建两个ID哦！

三、具体实现

1、Controller层

@Log4j2
@RestController
@RequestMapping(value = "/api/tencent")
@Api(tags = "后台-腾讯云对象存储API")
public class TecentUploadController {
    /**
     * 创建 COSClient 实例，这个实例用来后续调用请求
     * @return
     */
    private COSClient createCOSClient() {
        // 设置用户身份信息。
        // SECRETID 和 SECRETKEY 请登录访问管理控制台 https://console.cloud.tencent.com/cam/capi 进行查看和管理

        String secretId = "id"; //上图的id
        String secretKey = "key";//上图的密钥
        COSCredentials cred = new BasicCOSCredentials(secretId, secretKey);

        // ClientConfig 中包含了后续请求 COS 的客户端设置：
        ClientConfig clientConfig = new ClientConfig();

        // 设置 bucket 的地域
        // COS_REGION 请参见 https://cloud.tencent.com/document/product/436/6224
        clientConfig.setRegion( new Region("ap-chongqing"));

        // 设置请求协议, http 或者 https
        // 5.6.53 及更低的版本，建议设置使用 https 协议
        // 5.6.54 及更高版本，默认使用了 https
        clientConfig.setHttpProtocol(HttpProtocol.https);
        // 以下的设置，是可选的：
        // 设置 socket 读取超时，默认 30s
        clientConfig.setSocketTimeout(30*1000);
        // 设置建立连接超时，默认 30s
        clientConfig.setConnectionTimeout(30*1000);

        // 生成 cos 客户端。
        return new COSClient(cred, clientConfig);
    }

    /**
     * 图片上传,注意一定使用PostMapping
     * @param file
     * @return
     * @throws IOException
     */
    @ApiOperation(value = "图片上传，只支持(png,jpg)")
    @PostMapping(value = "/image/upload")
    @ApiImplicitParam(name = "file",value = "上传的文件",dataType = "_File",dataTypeClass = MultipartFile.class,required = true)
    public R imageUpload(@RequestPart MultipartFile file) throws IOException {
        if (file.isEmpty()){
            return R.build(AckCode.FILE_NOT_EMPTY);
        }

        //文件后缀名
        String ext="";
        //上传文件的名称
        String originalFileName=file.getOriginalFilename();

        if("blob".equals(originalFileName)){
            String mimeType=file.getContentType();
            //image/png  ,image/jpeg  ,image/jpeg
            Map<String,String> mimeTypeMap=new HashMap<>();
            mimeTypeMap.put("image/png",".png");
            mimeTypeMap.put("image/jpeg",".jpg");
            if(!mimeTypeMap.containsKey(mimeType)){
                return R.build(AckCode.UPLOAD_TYPE_ERROR_IMAGE);
            }
            ext=mimeTypeMap.get(mimeType);
        }else{
            //得到文件扩展名
            int lastIndex=originalFileName.lastIndexOf('.');
            if(lastIndex<=0){
                return R.build(AckCode.UPLOAD_TYPE_ERROR);
            }
            ext=originalFileName.substring(lastIndex);
            boolean contains = Arrays.asList(".png", ".jpg", ".jpeg").contains(ext.toLowerCase(Locale.ROOT));
            if(!contains){
                return R.build(AckCode.UPLOAD_TYPE_ERROR_IMAGE);
            }
        }
        //生成一个文件名
        String newFileName= UUID.randomUUID().toString()+ext;

        //开始上传
        COSClient cosClient = this.createCOSClient();
        // 存储桶的命名格式为 BucketName-APPID，此处填写的存储桶名称必须为此格式 存储桶名
        String bucketName = " ";
        // 对象键(Key)是对象在存储桶中的唯一标识 (文件名) 判断桶有没有这个文件夹，没有就创建
        String key = "/images/"+newFileName;

        // 这里创建一个 ByteArrayInputStream 来作为示例，实际中这里应该是您要上传的 InputStream 类型的流
        ObjectMetadata objectMetadata = new ObjectMetadata();
        // 上传的流如果能够获取准确的流长度，则推荐一定填写 content-length
        // 如果确实没办法获取到，则下面这行可以省略，但同时高级接口也没办法使用分块上传了
        objectMetadata.setContentLength(file.getSize());

        InputStream fis=file.getInputStream();

        //文件上传配置
        PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName, key, fis, objectMetadata);

        // 设置存储类型（如有需要，不需要请忽略此行代码）, 默认是标准(Standard), 低频(standard_ia)
        // 更多存储类型请参见 https://cloud.tencent.com/document/product/436/33417
        putObjectRequest.setStorageClass(StorageClass.Standard_IA);

        try {
            PutObjectResult putObjectResult  = cosClient.putObject(putObjectRequest);

            //自定义返回结果
            Map<String,String> dataMap=new HashMap<>();
            //步骤2定义的常量类
            dataMap.put("image_url", MarketConstans.TENCENT_IMAGE_SERVICE+key);
            dataMap.put("file_name", key);
            dataMap.put("original_file_name",originalFileName);

            return R.okHasData(dataMap);

        } catch (CosServiceException e) {
            log.error(e);
            return R.build(AckCode.UPLOAD_FILE_ERROR);
        } catch (CosClientException e) {
            log.error(e);
            return R.build(AckCode.UPLOAD_FILE_ERROR);
        }finally {
            //上传文件流要关闭
            fis.close();
            // 确认本进程不再使用 cosClient 实例之后，关闭之
            cosClient.shutdown();
        }
    }

}

四、利用swagger调试

1、使用腾讯云上传图片调试

图4-1-1 swagger-腾讯云上传图片测试

2、上传到腾讯云的图片界面

图4-2-1 腾讯云-上传图片

五、总结

本文章主要根据腾讯云官方文档API的参考进行编写代码，从而实现了上传图片的功能，可作为图像上传的参考。

PS：使用时需要修改的几个地方

1、存储桶名

2、存储服务地址（存储域名）

3、ID和密钥

m0_53773988

关注

9
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
springboot+vue项目之使用腾讯云实现图片上传

本文章主要根据腾讯云官方文档API的参考进行编写代码，从而实现了上传图片的功能，可作为图像上传的参考。PS：使用时需要修改的几个地方1、存储桶名2、存储服务地址（存储域名）3、ID和密钥。
复制链接

扫一扫