如何将base64图像数据以图片的形式上传到云存储obs中

大家好,我是雄雄。欢迎关注微信公众号:雄雄的小课堂。

在这里插入图片描述
今天分享个方法,如标题所示:

在日常开发中,我们经常会有这样的需求,将前台拿到的base64图像格式的数据,上传到云存储服务器上,比如阿里云oss,华为云obs等,今天我们就来看看,拿到数据后,我们如何上传。

首先需要一个工具类BASE64DecodedMultipartFileUtil

package org.jeecg.common.util;

import org.jetbrains.annotations.NotNull;
import org.springframework.web.multipart.MultipartFile;

import java.io.*;

public class BASE64DecodedMultipartFileUtil implements MultipartFile {

    private final byte[] imgContent;
    private final String header;

    public BASE64DecodedMultipartFileUtil(byte[] imgContent, String header) {
        this.imgContent = imgContent;
        this.header = header.split(";")[0];
    }

    @NotNull
    @Override
    public String getName() {
        return System.currentTimeMillis() + Math.random() + "." + header.split("/")[1];
    }

    @Override
    public String getOriginalFilename() {
        return System.currentTimeMillis() + (int) (Math.random() * 10000) + "." + header.split("/")[1];
    }

    @Override
    public String getContentType() {
        return header.split(":")[1];
    }

    @Override
    public boolean isEmpty() {
        return imgContent == null || imgContent.length == 0;
    }

    @Override
    public long getSize() {
        return imgContent.length;
    }

    @NotNull
    @Override
    public byte[] getBytes() throws IOException {
        return imgContent;
    }

    @NotNull
    @Override
    public InputStream getInputStream() throws IOException {
        return new ByteArrayInputStream(imgContent);
    }

    @Override
    public void transferTo(@NotNull File dest) throws IOException, IllegalStateException {
        new FileOutputStream(dest).write(imgContent);
    }

}

然后我们写个接口,接收前台传过来的值,控制器的代码如下:

/**
     * 主要用于小程序上传
     *
     * @return 地址
     */
    @PostMapping(value = "/uploadFile")
    public String uploadBase64(@RequestBody JSONObject json) {
        String bizPath = "applets/images/";
        JSONArray jsonArray = json.getJSONArray("imageaddr");
        JSONObject object = jsonArray.getJSONObject(0);
        String [] baseStr = object.getString("url").split(",");
        BASE64Decoder decoder = new BASE64Decoder();
        byte[] b = new byte[0];
        try {
            b = decoder.decodeBuffer(baseStr[1]);
        } catch (IOException e) {
            e.printStackTrace();
        }
        for (int i = 0; i < b.length; ++i) {
            if (b[i] < 0) {
                b[i] += 256;
            }
        }
        MultipartFile file = new BASE64DecodedMultipartFileUtil(b, baseStr[0]);
        String url  = CommonUtils.upload(file, bizPath, uploadType);
        url = url.substring(url.indexOf("applets/images/"));
        return url;
    }

该接口传递的参数格式是这样的:

[{"url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABgYAAAHyCAYAAAAgDXWwAAAgAElEQVR4AezBWc+taWIe5Ot+3rW+aQ81dPVs4C............."}]

所以我们在前端传参数的时候,一定要注意。

剩下的就都是走的jeecg-boot自带的文件上传的方法了,我这边也贴上来吧。

CommonUtils类中的upload方法

/**
     * 统一全局上传
     *
     * @Return: java.lang.String
     */
    public static String upload(MultipartFile file, String bizPath, String uploadType) {
        String url = "";
        try {
            if (CommonConstant.UPLOAD_TYPE_MINIO.equals(uploadType)) {
                url = MinioUtil.upload(file, bizPath);
            }  else if (CommonConstant.UPLOAD_TYPE_OSS.equals(uploadType)) {
                url = OssBootUtil.upload(file, bizPath);
            }else{
                url = ObsBootUtil.upload(file, bizPath);
            }
        } catch (Exception exception) {
            exception.printStackTrace();
        }
        return url;
    }

ObsBootUtil中文件上传的方法:


    /**
     * 文件上传
     *
     * @param file    文件
     * @param fileDir fileDir
     * @return 路径
     */
    public static String upload(MultipartFile file, String fileDir) throws Exception {
        return upload(file, fileDir, null);
    }

调用的是下面的upload方法

/**
     * 上传文件至华为云 OBS
     * 文件上传成功,返回文件完整访问路径
     * 文件上传失败,返回 null
     *
     * @param file    待上传文件
     * @param fileDir 文件保存目录
     * @return oss 中的相对文件路径
     */
    public static String upload(MultipartFile file, String fileDir, String customBucket) throws Exception {
        //update-begin-author:liusq date:20210809 for: 过滤上传文件类型
        FileTypeFilter.fileTypeFilter(file);
        //update-end-author:liusq date:20210809 for: 过滤上传文件类型

        String filePath;
        initOss(endPoint, accessKeyId, accessKeySecret);
        StringBuilder fileUrl = new StringBuilder();
        String newBucket = bucketName;
        if (oConvertUtils.isNotEmpty(customBucket)) {
            newBucket = customBucket;
        }
        try {
            //判断桶是否存在,不存在则创建桶
            if (!ossClient.headBucket(newBucket)) {
                ossClient.createBucket(newBucket);
            }
            // 获取文件名
            String orgName = file.getOriginalFilename();
            if ("".equals(orgName) || orgName == null) {
                orgName = file.getName();
            }
            orgName = CommonUtils.getFileName(orgName);
            String fileName = !orgName.contains(".")
                    ? orgName + "_" + System.currentTimeMillis()
                    : orgName.substring(0, orgName.lastIndexOf("."))
                    + "_" + System.currentTimeMillis()
                    + orgName.substring(orgName.lastIndexOf("."));
            if (!fileDir.endsWith(SymbolConstant.SINGLE_SLASH)) {
                fileDir = fileDir.concat(SymbolConstant.SINGLE_SLASH);
            }
            //update-begin-author:wangshuai date:20201012 for: 过滤上传文件夹名特殊字符,防止攻击
            fileDir = StrAttackFilter.filter(fileDir);
            //update-end-author:wangshuai date:20201012 for: 过滤上传文件夹名特殊字符,防止攻击
            fileUrl.append(fileDir).append(fileName);

            filePath = "https://" + newBucket + "." + endPoint + SymbolConstant.SINGLE_SLASH + fileUrl;

            PutObjectResult result = ossClient.putObject(newBucket, fileUrl.toString(), file.getInputStream());
            // 设置权限(公开读)
//            ossClient.setBucketAcl(newBucket, CannedAccessControlList.PublicRead);
            if (result != null) {
                log.info("------OSS文件上传成功------" + fileUrl);
            }
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
        return filePath;
    }

然后就上传OK啦,接口返回的是该文件的的图片地址,直接放数据库中就可以了。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要实现vue3分段上传视频到华为云obs,你可以按照以下步骤操作: 1. 在vue3项目引入obs-sdk-js库,用于连接华为云obs服务。 2. 创建一个上传对象,设置上传参数,如上传的文件名、文件大小等。 3. 将上传文件分段,每个分段大小为1MB-5MB,使用obs-sdk-js库的putObject接口上传每个分段。 4. 当所有分段上传完成后,使用obs-sdk-js库的completeMultipartUpload接口合并所有分段。 以下是一个简单的代码示例: ``` import OBS from 'obs-sdk-js' const obs = new OBS({ access_key_id: 'your_access_key_id', secret_access_key: 'your_secret_access_key', server: 'obs.cn-north-1.myhuaweicloud.com' }) async function uploadVideo(file) { const objectName = file.name const fileSize = file.size const partSize = 5 * 1024 * 1024 // 5MB const parts = Math.ceil(fileSize / partSize) // Step 1: Initiate multipart upload const { uploadId } = await obs.initiateMultipartUpload({ Bucket: 'your_bucket_name', Key: objectName }) // Step 2: Upload all parts const partPromises = [] for (let i = 0; i < parts; i++) { const start = i * partSize const end = Math.min(start + partSize, fileSize) const partNumber = i + 1 const partData = file.slice(start, end) const partPromise = obs.uploadPart({ Bucket: 'your_bucket_name', Key: objectName, PartNumber: partNumber, UploadId: uploadId, Body: partData }) partPromises.push(partPromise) } await Promise.all(partPromises) // Step 3: Complete multipart upload await obs.completeMultipartUpload({ Bucket: 'your_bucket_name', Key: objectName, UploadId: uploadId }) console.log('Video uploaded successfully!') } ``` 在上面的代码,我们首先初始化了一个OBS对象,然后在uploadVideo函数,我们使用initiateMultipartUpload接口创建一个分段上传的任务,并获取到任务的uploadId。然后,我们将上传文件分成多个大小相同的分段,使用uploadPart接口上传每个分段。最后,当所有分段上传完成后,我们使用completeMultipartUpload接口合并所有分段。 注意,上面的代码示例仅供参考,具体实现可能需要根据你的项目需求进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

穆雄雄

哎,貌似还没开张来着呢~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值