消息服务框架使用案例之--大文件上传(断点续传)功能

消息服务框架使用案例之--大文件上传(断点续传)功能

一、分块上传和断点续传原理

在我们的一个产品应用中,客户需要上传大量的文件到服务器,其中不乏很大的视频文件。虽然可以使用FTP这样成熟稳定的工具,但客户表示不会使用FTP工具,并且我们产品也觉得客户从我们软件在切换到FTP用户体验不好,如果做成后台脚本调用FTP上传那么进度信息很难呈现到我们软件上。最终,决定我们自己做文件上传功能。

    大文件上传受限于服务器每次处理数据的能力,不能一次传输完成,所以分块上传是必然的了,由于上传时间可能较长,中途可能因为网络或者人为原因终止上传,所以还需要断点上传功能。

    分块上传实际上是在客户端分块读取文件,然后在服务器分块写入文件,每次读写记录下读写的起始位置,也就是文件的偏移量,和要读写的数据长度。在上传过程中,每完成一个文件数据块的写入,就向客户端返回一次信息,客户端据此进行下一文件数据块的读取。
    断点续传功能也比较好实现,就是上传过程中将文件在服务器写为临时文件,等全部写完了(文件上传完),将此临时文件重命名为正式文件即可,如果中途上传中断过,下次上传的时候根据当前临时文件大小,作为在客户端读取文件的偏移量,从此位置继续读取文件数据块,上传到服务器从此偏移量继续写入文件即可。

二、消息服务框架实现文件上传

    假设我们将每一个文件数据块看做一份“消息”,那么文件上传本质上就是客户端和服务器两端频繁的消息交互而已。消息服务框架(MSF)是一个集成了服务容器和消息访问的框架,正好可以用来做文件上传应用。具体做法就是在服务端,编写一个“文件上传服务”,在客户端,编写一个调用上传服务的回调方法即可。

2.1,文件上传服务端

新建一个MSF服务类:

  public class FilesService : ServiceBase
  {

  }

然后添加一个处理上传文件的方法:

  文件上传服务方法

在这个方法中,有一个重要方法,
 //回调客户端,通知上传文件块
 var data = GetUploadFileData(uploadInfo);

它调用了MSF框架服务上下文的回调函数CallBackFunction,来读取客户端文件数据的,代码如下:

 private byte[] GetUploadFileData(UploadFileInfos fileinfo)
 {
    return base.CurrentContext.CallBackFunction<UploadFileInfos, byte[]>(fileinfo);
 }

另外,服务端写文件的方法CurWriteFile 实现如下:

复制代码
/// <summary>
        /// 将服务器端获取到的字节流写入文件
        /// </summary>
        /// <param name="pReadByte"></param>
        /// <param name="fileName">文件名</param>
        /// <param name="offset">要写入文件的位置</param>
        public void CurWriteFile(string fileName, byte[] pReadByte, long offset)
        {
            FileStream pFileStream = null;
            try
            {
                pFileStream = new FileStream(fileName, FileMode.OpenOrCreate);
                pFileStream.Seek(offset, SeekOrigin.Begin);
                pFileStream.Write(pReadByte, 0, pReadByte.Length);
            }
            catch(Exception ex)
            {
                throw new Exception("写文件块失败,写入位置:"+offset+",文件名:"+fileName+",错误原因:"+ex.Message);
            }
            finally
            {
                if (pFileStream != null)
                    pFileStream.Close();

                resetEvent.Set();
            }
        }
复制代码

2.2,文件上传客户端

现在看文件上传客户端代码,如何提供服务端需要的文件读取回调函数

复制代码
  ServiceRequest request = new ServiceRequest();
            request.ServiceName = "FilesService";
            request.MethodName = "UploadFiles";
            request.Parameters = new object[] { infos };
            Proxy srvProxy = new Proxy();
            srvProxy.ServiceBaseUri = string.Format("net.tcp://{0}", serverHost);
            srvProxy.ErrorMessage += srvProxy_ErrorMessage;
          


            Task<UploadResult> result= srvProxy.RequestServiceAsync<UploadResult, UploadFileInfos, byte[]>(request,
                 uploadingInfo =>
                 {
                    //action委托方法显示进度给客户端
                    action(new UploadStateArg()
                     {
                         State = uploadingInfo.Offset + uploadingInfo.Length >= uploadingInfo.Size
                         ? UploadState.Success: UploadState.Uploading,
                         ProgressFile = uploadingInfo.FilePath,
                         ProcessValue = Convert.ToInt32(uploadingInfo.Offset * 100 / uploadingInfo.Size),
                         TotalProcessValue = Convert.ToInt32((uploadingInfo.UploadIndex +1) * 100 / index)
                     });
                     Console.WriteLine(">>>Debug:Path:{0},FilePath:{1}",folder, uploadingInfo.FilePath);
                     var fullName = Path.IsPathRooted(folder)? folder + uploadingInfo.FilePath : uploadingInfo.FilePath;
                     Console.WriteLine(">>>服务器读取客户端文件:{0},偏移量:{1} 长度:{2}",
                         fullName, uploadingInfo.Offset, uploadingInfo.Length);
                     return ReadFileData(fullName, uploadingInfo.Offset, uploadingInfo.Length);
                 }
             );
复制代码

在上面的方法中, srvProxy.RequestServiceAsync泛型方法需要3个参数,第一个参数是服务的结果类型,第二个参数是提供给服务端回调方法(前面的base.CurrentContext.CallBackFunction方法)的参数,第三个参数是服务回调方法的结果。srvProxy.RequestServiceAsync 的回调方法的参数 uploadingInfo 是服务器推送过来的消息,里面包含了需要读取的文件信息,包括文件名,偏移量,读取长度等信息。

其中,客户端读取文件的方法 ReadFileData 实现如下:

复制代码
  /// <summary>
        /// 读取文件返回字节流
        /// </summary>
        /// <param name="fileName">文件路径</param>
        /// <param name="offset">要读取的文件流的位置</param>
        /// <param name="length">要读取的文件块大小</param>
        /// <returns></returns>
        private byte[] ReadFileData(string fileName, long offset, int length)
        {
            FileStream pFileStream = null;
            byte[] pReadByte = new byte[0];
            try
            {
                pFileStream = new FileStream(fileName, FileMode.Open, FileAccess.Read);
                BinaryReader r = new BinaryReader(pFileStream);
                r.BaseStream.Seek(offset, SeekOrigin.Begin);    
                pReadByte = r.ReadBytes(length);
                return pReadByte;
            }
            catch
            {
                return pReadByte;
            }
            finally
            {
                if (pFileStream != null)
                    pFileStream.Close();
            }
        }
复制代码

这样,在一次文件上传的“请求-响应”过程中,MSF的服务端进行了多次回调客户端的操作,客户端根据服务端推送过来的参数信息来精确的读取服务端需要的文件数据。一个支持断点续传的大文件上传服务,使用MSF框架就做好了。

三、其它

本文使用到的其它相关服务端对象的代码定义如下:

  View Code

如果你不清楚如何使用MSF来实现本文的功能,请先阅读下面的文章:

“一切都是消息”--MSF(消息服务框架)入门简介

建议你读完相关的其它两篇文章:

“一切都是消息”--MSF(消息服务框架)之【请求-响应】模式

“一切都是消息”--MSF(消息服务框架)之【发布-订阅】模式

读完后,建议你再读读MSF的理论总结:

分布式系统的消息&服务模式简单总结

 

有关消息服务框架(MSF)更多的讨论,请加我们QQ群讨论,群号:18215717 ,加群口令:消息服务框架

 



    本文转自深蓝医生博客园博客,原文链接:http://www.cnblogs.com/bluedoctor/p/8137052.html,如需转载请自行联系原作者


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现上文件断点和进度显示,可以使用Vue-Simple-Uploader这个插件。下面是一个使用Vue-Simple-Uploader实现上文件断点和进度显示的示例: 首先,安装Vue-Simple-Uploader插件: ``` npm install vue-simple-uploader --save ``` 然后,在Vue组件中引入和使用Vue-Simple-Uploader插件: ```html <template> <div> <vue-simple-uploader ref="uploader" :multiple="false" :auto-upload="false" :chunk-size="chunkSize" :upload-url="uploadUrl" :headers="headers" :params="params" :with-credentials="withCredentials" @progress="onProgress" @chunk-success="onChunkSuccess" @success="onSuccess" @error="onError" > <button @click="uploadFile">上文件</button> </vue-simple-uploader> </div> </template> <script> import VueSimpleUploader from 'vue-simple-uploader'; export default { components: { VueSimpleUploader, }, data() { return { chunkSize: 1024 * 1024, // 每个分片的大小 uploadUrl: '/upload', // 上地址 headers: {}, // 请求头 params: {}, // 请求参数 withCredentials: false, // 发送跨域请求时是否携带cookie }; }, methods: { // 上文件 uploadFile() { this.$refs.uploader.upload(); }, // 上进度 onProgress(progress) { console.log(`上进度:${progress}%`); }, // 分片上成功 onChunkSuccess(chunkResponse, chunkUploadParams, successChunks, totalChunks) { console.log(`分片上成功:${chunkResponse}`); }, // 上成功 onSuccess(response, file, fileList) { console.log(`上成功:${response}`); }, // 上失败 onError(error, file, fileList) { console.log(`上失败:${error}`); }, }, }; </script> ``` 在上面的示例中,我们通过设置Vue-Simple-Uploader的props来实现上文件的一些配置,如每个分片的大小、上地址、请求头、请求参数等。然后,我们通过调用`this.$refs.uploader.upload()`方法来触发文件。在上过程中,Vue-Simple-Uploader会触发一些事件,如上进度、分片上成功、上成功、上失败等,我们可以通过监听这些事件来实现断点和进度显示的功能。 其中,`@progress`事件会在上过程中定时触发,可以用来显示上进度;`@chunk-success`事件会在每个分片上成功后触发,可以用来记录已经上的分片;`@success`事件会在文件成功后触发,可以用来处理上成功后的逻辑;`@error`事件会在上失败后触发,可以用来处理上失败后的逻辑。 需要注意的是,为了实现断点功能,我们需要在后端实现接收分片、合并分片等功能。具体实现方式可以参考Vue-Simple-Uploader的文档。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值