BeetleX之web文件上传和续传

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

在web应用中上传文件是很普遍功能，但传统方式上传大文件比较麻烦一些，毕竟过程中一但网络出现异常就很容易导致文件上传失败又需要重新开始。在这里介绍一下BeetleX的web文件上传功能，它的特点就是支持断线续传，当网络异常恢复后组件可以继续后面内容的传输；这功能并不需要单独安装什么插件，只要浏览器支持HTML5即可以支持这一功能。接下来通过一个示例来介绍如何实现一个支持多文件，断线续传和拖放的web文件上传功能。

功能界面

首先我们先看一下这个示例的完整功能

以上功能包括选择文件和拖放文件上传，并支持断线后在不关闭浏览器的情况自动恢复上传.

实现

由于经过beetlex的封装，完成以上功能的代码只需要几行代码即可实现，可以说和传统jquery上传还要简单。

<body>
    <div id="page">
        <page-header>

        </page-header>
        <div class="container" style="margin-top:60px;">
            <div class="row">
                <form>
                    <div class="form-group">                     
                        <input ref="upload" @change="onUpload" type="file" multiple>
                    </div>                
                </form>
                <div @drop="onFileDrop" @dragover="event.preventDefault();" class="panel panel-default" style="min-height:400px;">
                    <div v-for="item in uploadFiles.items" class="upload-bar">
                        <div class="uploadstats-bar" :style="{width:item.percent+'%'}">[{{item.percent}}%]{{item.name}}</div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script>
        beetlex.useWebsocket();
        var model = {
            uploadFiles: new UploadFiles('/Upload'),
        };
        var page = new Vue({
            el: '#page',
            data: model,
            methods: {
                onUpload: function () {
                    var files = this.$refs.upload.files;
                    if (files.length == 0)
                        return;
                    this.uploadFiles.addmulti(files);
                    this.$refs.upload.value = null;
                },
                onFileDrop: function (event) {
                    event.preventDefault();
                    this.uploadFiles.addmulti(event.dataTransfer.files);
                }
            }
        });
        beetlex.websocket.connected = function () {
            //续传
            page.uploadFiles.upload();
        };
    </script>
</body>

beetlex

是专针http和websocket封装的一个通讯类，由于这个上传功能默认是使用websocket所以需要开启组件对websocket的支持。开启代码如下:

 beetlex.useWebsocket()

UploadFiles

这是上传文件的封装类，通过它来进行文件上传;参数是指定提交内容的Url,最后通过addmulti和add方法添加需要上传的文件;添加进去的文件会按顺序一个一个上传到对应的服务接口上。

续传

由于是经过websocket传输当在传大文件的情况下有可能会因连接断开导致上传不完整，这个需要在组件自动创建连接后继续。具体代码如下:

beetlex.websocket.connected = function () {
            //续传
     page.uploadFiles.upload();
};

beetlex会自动探测连接状态，当连接断开后则会自成动尝试重连，通过绑定连接事件重新恢复上传即可.

服务端代码

    class Program
    {
        static void Main(string[] args)
        {
            var builder = new HostBuilder()
                .ConfigureServices((hostContext, services) =>
                {
                    services.UseBeetlexHttp(o =>
                    {
                        o.LogToConsole = true;
                        o.ManageApiEnabled = false;
                        o.WebSocketMaxRPS = 0;
                        o.Port = 80;
                        o.SetDebug();
                        o.LogLevel = BeetleX.EventArgs.LogType.Warring;
                    },
                    typeof(Program).Assembly);
                });
            builder.Build().Run();
        }
    }

    [BeetleX.FastHttpApi.Controller]
    public class Home
    {
        public void Upload(string name, string data, bool completed, int index, int buffersize, long filesize)
        {
            byte[] buffer = System.Convert.FromBase64String(data);
            using (System.IO.Stream stream =
                index == 0 ? System.IO.File.Create(name) : System.IO.File.Open(name, System.IO.FileMode.OpenOrCreate))
            {
                if (stream.Length > buffersize * index)
                    stream.Position = buffersize * index;
                else
                    stream.Seek(0, System.IO.SeekOrigin.End);
                stream.Write(buffer, 0, buffer.Length);
                stream.Flush();
            }
        }
    }

在线演示

http://upload.ikende.com/

示例代码

https://github.com/IKende/BeetleX-Samples/tree/master/WebSocket.UploadFiles

来源：oschina

链接：https://my.oschina.net/ikende/blog/3145974

标签

BeetleX