oss上传文件进度条展示

lh--yu lh--yu     2023-01-23     359

关键词:

用户上传文件至oss的时候需要增加一个进度条展示,查看了官方文档及网上几篇博客后整理一下相关思路,在此记录一下自己的成长。

在此以上传视频为例,自定义监听监听文件上传进度,通过将字节数和总字节数之间比例写入session中返回给前端进行进度展示。

    private static String endpoint = "http://oss-cn-beijing.aliyuncs.com"; 
    private static String accessKeyId = "<yourAccessKeyId>";
    private static String accessKeySecret = "<yourAccessKeySecret>";
    private static String bucketName = "<yourBucketName>";

/**
     * 上传私密文件至私有bucket
     * 上传至私有bucket的时候 返回key 每次通过key读取文件链接
     * 链接有效时间两小时
     * Date expiration = new Date(new Date().getTime() + 3600l * 1000 * 2);
     * @Param uploadFile 上传文件
     * @Param picturePath key
     * @author LH_Yu
     */
    public static HashMap<String, Object> uploadOSSToll(MultipartFile uploadFile, String videoPath, HttpSession session) throws Exception 
        HashMap<String, Object> map = new HashMap<>();
        // 创建OSSClient实例
        OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
        /**
         * 这里用带进度条的OSS上传
         * 将session传入PutObjectProgressListener的构造中!官网例子是没有这个操作的
         * 注意new PutObjectRequest()的第三个参数是File而不是官网介绍的FileInputStream,否则获取不到进度. 一定切记!!!
         * MultipartFile转File
         */
        File f = null;
        try 
            f = File.createTempFile("tmp", null);
            uploadFile.transferTo(f);
            f.deleteOnExit();
         catch (Exception e) 
            e.printStackTrace();
        
        // 上传  --> 不带进度条上传
//        ossClient.putObject(bucketNamePrivate, videoPath + uploadFile.getOriginalFilename(), new ByteArrayInputStream(uploadFile.getBytes()));
        // 上传 --> 带进度条上传
        ossClient.putObject(new PutObjectRequest(bucketNamePrivate, videoPath + uploadFile.getOriginalFilename(),f).withProgressListener(new PutObjectProgressListener(session)));
        // 关闭client
        ossClient.shutdown();
        //设置过期时间 -- 两小时
        Date expiration = new Date(new Date().getTime() + 3600l * 1000 * 2);
        //取出文件上传路径
        String url = ossClient.generatePresignedUrl(bucketNamePrivate, videoPath + uploadFile.getOriginalFilename(), expiration).toString();
        map.put("key", videoPath + uploadFile.getOriginalFilename());
        map.put("url", url);
        return map;
    
技术分享图片

自定义监听,监听文件上传进度

public static class PutObjectProgressListener implements ProgressListener 
    private long bytesWritten = 0;
    private long totalBytes = -1;
    private boolean succeed = false;
    private HttpSession session;
    private int percent = 0;

    //构造方法中加入session
    public PutObjectProgressListener() 
    

    public PutObjectProgressListener(HttpSession mSession) 
        this.session = mSession;
        session.setAttribute("upload_percent", percent);
    

    @Override
    public void progressChanged(ProgressEvent progressEvent) 
        long bytes = progressEvent.getBytes();
        ProgressEventType eventType = progressEvent.getEventType();
        switch (eventType) 
            case TRANSFER_STARTED_EVENT:
                logger.debug("Start to upload......");
                break;
            case REQUEST_CONTENT_LENGTH_EVENT:
                this.totalBytes = bytes;
                logger.debug(this.totalBytes + " bytes in total will be uploaded to OSS");
                break;
            case REQUEST_BYTE_TRANSFER_EVENT:
                this.bytesWritten += bytes;
                if (this.totalBytes != -1) 
                    int percent = (int) (this.bytesWritten * 100.0 / this.totalBytes);
                    //将进度percent放入session中 官网demo中没有放入session这一步
                    session.setAttribute("upload_percent", percent);
                    logger.debug(bytes + " bytes have been written at this time, upload progress: " + percent + "%(" + this.bytesWritten + "/" + this.totalBytes + ")");
                 else 
                    logger.debug(bytes + " bytes have been written at this time, upload ratio: unknown" + "(" + this.bytesWritten + "/...)");
                
                break;
            case TRANSFER_COMPLETED_EVENT:
                this.succeed = true;
                logger.debug("Succeed to upload, " + this.bytesWritten + " bytes have been transferred in total");
                break;
            case TRANSFER_FAILED_EVENT:
                logger.debug("Failed to upload, " + this.bytesWritten + " bytes have been transferred");
                break;
            default:
                break;
        
    

    public boolean isSucceed() 
        return succeed;
    
技术分享图片
 



使用jquery.form.js实现文件上传及进度条前端代码

...x的表单提交只能提交data数据到后台,没法实现file文件的上传还有展示进度功能,这里用到form.js的插件来实现,搭配css样式简单易上手,而且高大上,推荐使用。需要解释下我的结构,#upload-input-file的input标签是真实的文件上传... 查看详情

vue上传文件到阿里云oss,并获取上传进度

...配置,传的参数data从后台获取2.使用element-ui的Upload作为上传组件,http-request来绑定自定义上传的方法Upload,action写为空。:before-upload="beforeUpload"表示在上传前做的事情,绑定了方法beforeUpload,我们可以在这个方法里获取... 查看详情

将图像上传到 Firebase 存储时如何制作进度条?

】将图像上传到Firebase存储时如何制作进度条?【英文标题】:howcanimakeaprogressbarwheniuploadaimagetomyfirebasestorage?【发布时间】:2019-09-1403:31:44【问题描述】:我想取得进展,向用户展示上传了多少文件,这样他就不会在上传过程中... 查看详情

文件上传和进度条

】文件上传和进度条【英文标题】:Fileuploadandprogessbar【发布时间】:2013-01-2114:01:05【问题描述】:我想在上传文件时根据读取的文件数量显示进度条。我们如何使用JS和Servlet来实现这一点我知道上传我可以使用apachecommonslib,但... 查看详情

文件上传进度条干扰控制器重定向

】文件上传进度条干扰控制器重定向【英文标题】:FileuploadprogressbarinterfereswithControllerredirect【发布时间】:2021-11-1610:23:43【问题描述】:我有一个文件提交表单和一个跟踪上传进度的进度条。但是,控制进度条的javascript会干扰... 查看详情

文件上传进度条[重复]

】文件上传进度条[重复]【英文标题】:Fileuploadprogressbar[duplicate]【发布时间】:2011-04-0611:20:21【问题描述】:可能重复:UploadProgressBarinPHP任何人都可以建议一种在上传文件时包含文件上传进度条的好方法。我知道这将是javascript... 查看详情

使用 jQuery 的文件上传进度条

】使用jQuery的文件上传进度条【英文标题】:FileuploadprogressbarwithjQuery【发布时间】:2013-03-0220:39:19【问题描述】:我正在尝试在我的项目中实现AJAX文件上传功能。我为此使用jQuery;我的代码使用AJAX提交数据。我还想实现一个文... 查看详情

使用 jQuery 的文件上传进度条

】使用jQuery的文件上传进度条【英文标题】:FileuploadprogressbarwithjQuery【发布时间】:2013-03-0220:39:19【问题描述】:我正在尝试在我的项目中实现AJAX文件上传功能。我为此使用jQuery;我的代码使用AJAX提交数据。我还想实现一个文... 查看详情

js文件上传进度条

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>XMLHttpRequest上传文件进度实现</title><scripttype="text/javascript">varxhr;varot;//varoloaded;//上传文件方法functionUp 查看详情

MVC 文件上传的引导进度条

】MVC文件上传的引导进度条【英文标题】:BootstrapProgressBarforMVCFileUpload【发布时间】:2014-08-2402:38:06【问题描述】:有没有一种简单的方法可以在文件加载时显示阻塞的Bootstrap进度条?上传文件时,进度会显示在chrome的状态栏中... 查看详情

使用 jquery ui 进度条上传文件

】使用jqueryui进度条上传文件【英文标题】:fileuploadwithjqueryuiprogressbar【发布时间】:2011-01-2015:13:55【问题描述】:我正在使用jCrop,我想为图片上传添加一个进度条,如何让jqueryui进度条加载图片字节?【问题讨论】:我相信这... 查看详情

带进度条的文件上传?

】带进度条的文件上传?【英文标题】:Fileuploaderwithprogressbar?【发布时间】:2011-09-1108:01:12【问题描述】:如何创建带有进度条的HTML/PHP/AJAX文件上传器?我不知道从哪里开始。【问题讨论】:【参考方案1】:我用过Uploadify。易... 查看详情

文件上传:进度条完成百分比

】文件上传:进度条完成百分比【英文标题】:Fileuploads:Percentagecompletedprogressbar【发布时间】:2014-03-0523:30:00【问题描述】:我正在尝试为BuddyPress中的头像上传添加一个“到目前为止完成的百分比”进度条。目的是阻止用户在... 查看详情

vue多文件上传进度条进度不更新问题

...完全没人能回答。谢谢这篇文章 最近在做一个多图片上传的组件,需求是做到多文件依次上传,并显示上传进度条。逻辑部分实现了以后,在更新进度条视图的时候出现一点问题:动态计算生产的进度progress属性不会自动更... 查看详情

jqueryajax实现上传文件代码,带进度条

原文:jqueryajax实现上传文件代码,带进度条 源代码下载地址:http://www.zuidaima.com/share/1550463291116544.htmajax上传文件代码,带进度条的。首页http://localhost:端口/项目名/common/test.htm上传中标签: jquery ajax 上传 ... 查看详情

如何使用进度条快速上传大文件?

】如何使用进度条快速上传大文件?【英文标题】:Howtouploadlargefileinexpresswithprogressbar?【发布时间】:2012-10-1201:46:31【问题描述】:目前我正在使用socket.io上传带有进度条的视频。这是教程http://net.tutsplus.com/tutorials/javascript-ajax/h... 查看详情

如何在ajax文件上传中显示进度条

】如何在ajax文件上传中显示进度条【英文标题】:Howtoshowprogressbarinajaxfileupload【发布时间】:2013-01-2605:22:52【问题描述】:我的代码发布了ajax请求,但没有显示进度条。请帮助更正代码以显示工作进度条。$(document).ready(function()... 查看详情

jqueryajax实现上传文件代码,带进度条

原文:jqueryajax实现上传文件代码,带进度条 源代码下载地址:http://www.zuidaima.com/share/1550463291116544.htmajax上传文件代码,带进度条的。首页http://localhost:端口/项目名/common/test.htm上传中标签: jquery ajax 上传  查看详情