vue3+华为云obs(springboot)分段上传

最新推荐文章于 2024-06-11 09:27:09 发布
最新推荐文章于 2024-06-11 09:27:09 发布
阅读量592 收藏 2
点赞数
分类专栏： 开发相关 文章标签： spring boot 华为云 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25035345/article/details/133145996
版权

vue3+华为云obs(springboot)分段上传

springboot

pom依赖
 <dependency>
    <groupId>com.huaweicloud</groupId>
    <artifactId>esdk-obs-java</artifactId>
    <version>3.23.5</version>
</dependency>
代码块
package com.pig4cloud.pig.admin.controller;
import com.obs.services.ObsClient;
import com.obs.services.model.*;
import lombok.AllArgsConstructor;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.*;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * 切片上传
 */
@RestController
@AllArgsConstructor
@RequestMapping("/upload")
public class SysUploadController {

    private final ObsClient obsClient;

    /**
     * 启动上传任务
     */
    @GetMapping("/getUploadId/{objectKey}")
    public String getUploadId(@PathVariable("objectKey")String objectKey) {
        InitiateMultipartUploadRequest request = new InitiateMultipartUploadRequest("<桶名称>", objectKey);
        ObjectMetadata metadata = new ObjectMetadata();
        metadata.addUserMetadata("property", "property-value");
        metadata.setContentType("text/plain");
        request.setMetadata(metadata);
        InitiateMultipartUploadResult result = obsClient.initiateMultipartUpload(request);
        String uploadId = result.getUploadId();
        return uploadId;
    }

    /**
     * 分片上传
     */
    @PostMapping("/chunk")
    public Map<String,String>  splitFileUpload(
            @RequestParam("objectKey")String objectKey,
            @RequestParam("file") MultipartFile file,
            @RequestParam("chunk") int chunk,
            @RequestParam("uploadId") String uploadId) throws Exception {
        File file1 =  multipartFileToFile(file);
        Map<String,String> map = uploadChunk(uploadId, file1, chunk, objectKey);
        return map;
    }

    /**
     * 合并上传
     */
    @PostMapping("/completeUpload")
    public CompleteMultipartUploadResult completeUpload(
            @RequestParam("objectKey")String objectKey,
            @RequestParam("uploadId") String uploadId,
            @RequestBody List<Map<String,String>> mapList
    ) {
        List<PartEtag> partEtags = new ArrayList<>();
        for(Map<String,String> map: mapList ){
            PartEtag part1 = new PartEtag();
            part1.setPartNumber(Integer.valueOf(map.get("partNumber")));
            part1.seteTag(map.get("etag"));
            partEtags.add(part1);
        }
        CompleteMultipartUploadRequest request = new CompleteMultipartUploadRequest(
                "<桶名称>", objectKey, uploadId, partEtags);
        CompleteMultipartUploadResult result = obsClient.completeMultipartUpload(request);
        return result;
    }

    /**
     * 取消任务上传
     */
    @GetMapping("/cancelUpload")
    public void cancelUpload(
        @RequestParam("objectKey")String objectKey,
        @RequestParam("uploadId") String uploadId
    ){
        AbortMultipartUploadRequest request = new AbortMultipartUploadRequest("<桶名称>", objectKey, uploadId);
        obsClient.abortMultipartUpload(request);
    }

    public Map<String,String> uploadChunk(String uploadId, File file,int chunk, String objectKey){
        // Endpoint以北京四为例，其他地区请按实际情况填写。
        Map<String,String> map = new HashMap<>();
        UploadPartRequest request = new UploadPartRequest("<桶名称>", objectKey);
        request.setUploadId(uploadId);
        request.setPartNumber(chunk);
        request.setFile(file);
        request.setPartSize(5 * 1024 * 1024L);
        UploadPartResult result = obsClient.uploadPart(request);
        map.put("etag",result.getEtag());
        map.put("partNumber",String.valueOf(result.getPartNumber()));
        return map;
    }

    /**
     * MultipartFile 转 File
     *
     * @param file
     * @throws Exception
     */
    public static File multipartFileToFile(MultipartFile file) throws Exception {

        File toFile = null;
        if (file.equals("") || file.getSize() <= 0) {
            file = null;
        } else {
            InputStream ins = null;
            ins = file.getInputStream();
            toFile = new File(file.getOriginalFilename());
            inputStreamToFile(ins, toFile);
            ins.close();
        }
        return toFile;
    }

    //获取流文件
    private static void inputStreamToFile(InputStream ins, File file) {
        try {
            OutputStream os = new FileOutputStream(file);
            int bytesRead = 0;
            byte[] buffer = new byte[8192];
            while ((bytesRead = ins.read(buffer, 0, 8192)) != -1) {
                os.write(buffer, 0, bytesRead);
            }
            os.close();
            ins.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

}
obs初始化类
package com.pig4cloud.pig.admin.config;
import com.obs.services.ObsClient;
import com.pig4cloud.plugin.oss.OssProperties;
import lombok.AllArgsConstructor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
@Configuration
@AllArgsConstructor
public class ObsConfiguration {

    // 请在yml里配置或使用 @Value 单独获取
    private final OssProperties ossProperties;

    @Bean
    public ObsClient obsClient() {
        return new ObsClient(ossProperties.getAccessKey(),
                ossProperties.getSecretKey(),
                ossProperties.getEndpoint());
    }

}
vue3
<template>
    <div class="upload-container">
        <div class="fileUpload">
            <div class="item-upload">
                <span v-if="required" class="required">*</span>
                <el-button type="primary" οnclick="document.getElementById('fpfileName').click()">文件选择</el-button>
                <input  type="file" id="fpfileName" class="file2" style="display: none" @change="selectFile" />
            </div>
            <div v-if="showFileName" class="item-info">
                {{fileName}}
            </div>
            <div v-else class="item-info">
                支持{{getAcceptType()}}文件格式
            </div>
            <div  v-if="progress>0" class="item-cancel">
                <el-button style="margin-top: 5px" size="small" type="danger" @click="cancelUploadInfo">X</el-button>
            </div>
        </div>
        <div class="item-process" v-if="progress>0">
            <el-progress :text-inside="true" :stroke-width="20" :percentage="progress"/>
        </div>
        <div v-if="requiredValid" class="item-valid">
            请上传文件
        </div>
    </div>

</template>
<script>
    import { getUploadId , uploadFileInfo, completeUpload, cancelUpload, getFileUrl} from "@/api/admin/client.js"
    import { defineComponent, reactive, toRefs,  onMounted } from "vue";
    import { ElMessage } from 'element-plus'
    export default defineComponent({
        name: "file-upload",
        props:{
            //文件接受类型
            accept:{
                type: Array,
                default: ['doc','docx','pdf']
            },
            //是否必填
            required:{
                type: Boolean,
                default: false
            },
            //文件限制大小
            fileSize:{
                type: Number,
                default: 500
            }
        },
        setup(props) {
            const data =reactive({
                file: null,
                fileName: "",
                fileSize: 0,
                progress: 0,
                objectKey: "",
                chunkSize: 5*1024 * 1024,
                totalChunks: 0,
                currentChunk: 1,
                uploadId: "",
                partArr: [],
                showFileName: false,
                bucketName: "",
                objectKeyName: "",
                required: props.required,
                requiredValid: false
            })
            // 选择文件
            const selectFile = (event)=>{
                data.file = event.target.files[0];
                event.target.value = ''
                if(data?.file?.size){
                    const fileSize = Math.round(data?.file?.size/1024/1024*100)/100
                    if(fileSize > props.fileSize){
                        ElMessage.warning("文件大小超过上限"+props.fileSize+"MB")
                        return
                    }
                    data.fileSize = fileSize
                    console.log(data.fileSize)
                    const fileName = data.file.name
                    const index = fileName.lastIndexOf(".");
                    const fileType = fileName.substring(index+1, fileName.length)
                    if(!props.accept.includes(fileType)){
                        ElMessage.warning("文件类型不支持")
                        return
                    }
                    data.progress = 0;
                    data.fileName = data.file.name
                    data.showFileName = true
                    data.totalChunks = Math.ceil(data.file.size / data.chunkSize)
                    data.objectKey = guid()+"."+fileType
                    getUploadId(data.objectKey).then((res)=>{
                        data.uploadId = res.data
                        data.progress = 1;
                        uploadFile();
                    })
                }
            }

            // 文件上传
            const uploadFile = ()=>{
                const index = data.currentChunk -1
                const start = index * data.chunkSize;
                const end = Math.min((index + 1) * data.chunkSize, data.file.size);
                const formData = new FormData()
                formData.append('file', data.file.slice(start, end))
                formData.append('chunk', data.currentChunk)
                formData.append('objectKey', data.objectKey)
                formData.append('uploadId', data.uploadId)
                // 调用后端接口上传切片数据
                uploadFileInfo(formData).then((res) => {
                    data.partArr.push(res.data)
                    console.log(data.progress)
                    data.currentChunk++;
                    data.progress = Math.floor((data.currentChunk / data.totalChunks) * 100);
                    if (data.currentChunk <= data.totalChunks) {
                        uploadFile();
                    } else {
                        // 所有切片上传完成
                        data.progress = 99;
                        console.log(data.progress)
                        complete();
                    }
                }).catch((error) => {
                    initParam()
                    console.error('切片上传失败：', error);
                    ElMessage.warning("文件上传异常或上传已取消")
                });
            }

            // 上传完成并合并分段上传
            const complete = () =>{
                completeUpload(data.partArr,data.objectKey,data.uploadId).then((res) => {
                    console.log('文件上传完成');
                    console.log(res);
                    data.bucketName = res.data.bucketName
                    data.objectKeyName = res.data.objectKey
                    data.progress = 100;
                    initParam()
                }).catch((error) => {
                    console.error('文件上传失败：', error);
                    ElMessage.error("文件上传失败")
                });
            }

            // 取消上传
            const cancelUploadInfo = () =>{
                if(data.progress !== 100){
                    cancelUpload(data.objectKey,data.uploadId).then(()=>{
                        data.progress = 0;
                        data.showFileName = false
                        initParam()
                    })
                }else{
                    data.progress = 0;
                    data.showFileName = false
                    initParam()
                }

            }

            const getAcceptType = () =>{
                let str = "";
                if(props.accept){
                    for(let item of props.accept){
                        str += item +","
                    }
                }
                return str.substr(0,str.length-1)
            }

            // 构建uuid
            const guid =() => {
                return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                    var r = Math.random() * 16 | 0,
                        v = c == 'x' ? r : (r & 0x3 | 0x8);
                    return v.toString(16);
                });
            }

            // 初始化参数
            const initParam = ()=>{
                data.file = null;
                data.objectKey = ""
                data.totalChunks = 0
                data.currentChunk = 1
                data.uploadId = ""
                data.partArr = []
                data.requiredValid = false
            }

            // 必传校验
            const validRequired = ()=>{
                if(data.bucketName && data.objectKeyName){
                    data.requiredValid = false
                    return true
                }else{
                    data.requiredValid = true
                    return false
                }
            }

            // 返回上传结果 桶名称、文件名、文件大小
            const getUploadInfo = () =>{
                return {
                    bucketName: data.bucketName,
                    fileName: data.objectKeyName,
                    fileSize: data.fileSize
                }
            }

            // 初始化
            onMounted(()=>{
                data.progress = 0;
            })

            return{
                ...toRefs(data),
                selectFile,
                uploadFile,
                getAcceptType,
                validRequired,
                getUploadInfo,
                cancelUploadInfo
            }
        }
    })
</script>
<style scoped>
    .upload-container{
        .fileUpload {
            display: flex;
            flex-direction: row;
            padding: 0px 8px;
            .item-upload {
                width: 100px;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                .required{
                    color: red;
                    padding: 0px 5px;
                }
            }
            .item-info {
                flex: 1;
                padding-top: 12px;
                font-size: 13px;
            }
            .item-cancel{
                width: 30px;
                padding-right: 20px;
            }
        }
        .item-process{
            margin-top: 5px;
            padding: 0px 23px;
            box-sizing: border-box;
        }
        .item-valid{
            color: red;
            padding: 0px 10px;
            font-size: 13px;
        }
    }
</style>
接口调用
// 获取uploadId
export function getUploadId(objectKey) {
  return request({
    url: '/admin/upload/getUploadId/' + objectKey,
    method: 'get'
  })
}

// 分段上传
export function uploadFileInfo( data) {
  return request({
    url: '/admin/upload/chunk',
    method: 'post',
    headers:{'Content-Type': 'multipart/form-data'},
    data: data
  })
}

// 分段合并
export function completeUpload( data,objectKey,uploadId) {
  return request({
    url: '/admin/upload/completeUpload?objectKey='+objectKey+'&uploadId='+uploadId,
    method: 'post',
    data: data
  })
}

// 取消上传
export function cancelUpload(objectKey,uploadId) {
  return request({
    url: '/admin/upload/cancelUpload?objectKey='+objectKey+'&uploadId='+uploadId,
    method: 'get'
  })
}
小未来_smallfuture
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
华为云大文件分片上传操作
AngerJava的博客
03-24 2744
记录一下： 由于spring boot上传 都是使用 MultipartFile file，华为云提供的文档都是File 有一定出入所以结合自己实际需求进行完善，以记录心路历程，这套也可使用在阿里云的分片上传 华为云官方文档： 分段上传_对象存储服务 OBS_Java_上传对象_华为云 分段上传分为如下3个步骤： 初始化分段上传任务（ObsClient.initiateMultipartUpload）。 逐个或并行上传段（ObsClient.uploadPart）。 合并段（O...
vue 上传文件到华为云obs
Lora_0925的博客
05-21 2325
需求： 上传图片、视频、音频文件到华为云obs（由后端创建桶），前端只需上传即可 环境： 1.下载OBS BrowserJS SDK开发包点击跳转，引入esdk-obs-browserjs-without-polyfill-3.19.5.min.js文件 2.引入axios 3.上传 // 发起PUT请求 putSend(url, formData) { // put请求 // 传入一个参数对象即可得到基于该参数对象的文本内容 var reop..
obs临时url分段上传实例
weixin_42812602的博客
06-08 547
使用obs提供的临时ur，l实现超大文件分段上传的实例
Spring Boot 分片上传、断点续传、大文件上传、秒传，应有尽有
最新发布
Wewe的博客
06-11 1384
分片上传，就是将所要上传的文件，按照一定的大小，将整个文件分隔成多个数据块（我们称之为Part）来进行分别上传，上传完之后再由服务端对所有上传的文件进行汇总整合成原始的文件。断点续传是在下载或上传时，将下载或上传任务（一个文件或一个压缩包）人为的划分为几个部分，每一个部分采用一个线程进行上传或下载，如果碰到网络故障，可以从已经上传或下载的部分开始继续上传或者下载未完成的部分，而没有必要从头开始上传或者下载。本文的断点续传主要是针对断点上传场景。
VUE前端直接上传图片到华为云OBS极简版
Boreas_W的博客
07-18 1474
vue前端直接上传文件到华为云OBS，element-ui，节省应用服务器资源。
如何使用Spring Boot和Vue框架，集成华为云OBS来实现大文件切片上传？
网络技术联盟站
07-08 780
华为云对象存储服务（OBS）是一种安全可靠、高可扩展的云存储服务。它提供了全球范围的数据存储和访问能力，适用于各种场景，包括大数据分析、备份和恢复、多媒体应用等。华为云OBS的链接：https://www.huaweicloud.com/intl/zh-cn/product/obs.html大文件切片上传是一种将大文件分割成小片段进行上传的技术。通过将大文件切片上传，可以降低单个请求的数据量，提高上传速度和稳定性。将文件切割成固定大小的片段。依次上传每个片段，并将它们按照一定的顺序存储在服务器端。
vue+el-upload（封装华为云OBS上传文件）前端直传
weixin_45137175的博客
08-25 3788
vue+el-upload+华为云OBS直传，YYDS
结合Vue+axios+SpringBoot开发的用户管理系统
12-15
在本项目中，我们探索了如何使用Vue.js前端框架、axios数据交互库以及SpringBoot后端框架构建一个完整的用户管理系统。这个系统集成了MyBatis作为持久层框架，实现了前后端分离，支持用户的基本操作，如增加、删除、...
基于vue3+element-plus+springboot+mybatis+jpa+mysql的宿舍管理系统源码
05-24
全套资源包包括：vue3前端源码、springboot后端源码、jdk、nvm安装包、nodejs安装包、MySQL安装包，宿舍管理系统使用说明文档 详细介绍请参看：https://blog.csdn.net/leonMary/article/details/124956264
阿里云k8s 部署vue2+nginx+springboot2.5+nacos2.0.3
01-10
阿里云k8s 部署vue2+nginx+springboot2.5+nacos2.0.3
vue+springboot 大文件上传
01-23
在现代Web应用中，大文件上传...以上就是使用Vue.js和SpringBoot实现大文件分片上传的基本流程和关键点。在实际项目中，可能还需要结合其他技术，如数据库、文件存储服务以及各种安全策略，来构建一个完整的解决方案。
基于vue3+AntDesign+springboot+mybatis+jpa+mysql的图书管理系统源码
06-19
全套资源包包括：vue3+AntDesign前端源码、springboot后端源码、jdk、nvm安装包、nodejs安装包、MySQL安装包，图书管理系统使用说明文档 详细介绍请参看：...
Vue+Element UI分段上传（华为云obs、阿里云oss）
qq_42365152的博客
04-27 2142
结合Vue + Element UI框架简单封装分段上传组件，华为云obs的上传文件组件，阿里云oss上传文件组件。
vue使用obs华为云上传图片或者视频
weixin_44860425的博客
05-29 1053
【代码】vue使用obs华为云上传图片或者视频。
华为云文件上传（单个上传和分段上传）
Missying55的博客
10-20 1762
华为云文件上传（单个和分段）
如何使用Java在华为云OBS上传大文件？
网络技术联盟站
08-25 1584
在上面的代码中，我们首先定义了OBS服务的端点、AK/SK密钥、OBS桶的名称和要上传的对象的对象键。在使用华为云OBS上传大文件时，我们可以使用Java代码实现，本文将介绍利用Java代码上传大文件至华为云OBS的方法。在本文中，我们介绍了华为云OBS的概念和特点，以及如何使用Java代码将大文件上传到OBS。通过学习和使用OBS，我们可以更好地管理和存储大量的数据，提高数据的安全性和可靠性，提高工作效率和服务质量。上述代码中，首先配置了OBS连接信息，创建OBS客户端，并创建上传请求。
华为云对象存储服务 OBS VUE
Sugar
04-20 324
vue上传视频到华为云obs
YM123456999的博客
05-12 806
vue、上传视频、vue上传视频到华为云
springboot华为云obs 整合vue
12-31
Spring Boot是一个用于构建独立的、生产级别的Spring应用程序的框架，而华为云的对象存储服务（OBS）是一种高可靠、安全、低成本的分布式存储服务。Vue是一种流行的JavaScript框架，用于构建用户界面。 要实现Spring Boot与华为云OBS的整合，可以使用华为云提供的Java SDK来完成对OBS的操作，例如上传、下载、删除等。首先需要在Spring Boot项目中引入华为云OBS的Java SDK，并配置相应的认证信息，如Access Key和Secret Key，以便程序能够访问OBS。 接着，在Spring Boot中编写相应的服务类，使用OBS Java SDK提供的方法来实现文件的上传和下载功能。通过URL对文件进行访问。 在前端方面，可以将Vue作为前端框架，使用其提供的组件和路由功能来构建用户界面，并通过axios等HTTP客户端库来访问Spring Boot后端提供的OBS文件操作接口。 整合完成后，用户可以通过Vue前端页面来上传、下载和管理华为云OBS中的文件，同时Spring Boot后端可以处理前端传来的请求，并调用OBS Java SDK完成相应的文件操作。这样通过整合，就可以实现一个能够与华为云OBS进行交互的前后端应用系统，为用户提供便捷的文件存储和管理功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值