Vue项目使用Websocket大文件FileReader()切片上传实例

JavaScript/前端
482
0
0
2023-03-17
简单易懂的JSONP和CORS跨域方案详解
上一篇
最实用的正则表达式整理
下一篇
标签   websocket
目录
  • 使用技术 
  • upfile.js文件
  • 新增需求：对上传文件流进行加密，并传给后端做验证
  • 还是在upfile.js文件（也可以单独放一个文件）

大文件上传，本地1.3G文件不到一分钟上传完毕

使用技术 

  • Vue框架 
  • WebSocket双向传输
  • FileReader读取文件

封装的WebSocket请求文件上传方法，目前只支持单文件上传，有研究出来多文件上传，记得评论哦

upfile.js文件

//file.slice(起始字节，终止字节)与FileReader实现文件切片读取
function PartFileReader(files, type, event) {
    this.files = files;//inputObj.files[0]
    this.type = type;  //配置FileReader读取文件的方法
    this.event = event;//配置读取文件时需要触发的事件
    this.total = files.size;//获取文件大小
    this.step = 1024 * 1024 * 10;//1MB（单片大小/一兆）
    this.loaded = 0; //文件当前读取进度
    this.reader = new FileReader(); //实际读取文件的FileReader对象实例
    this.abort = this.reader.abort; //中断文件读取（可以通过中断文件读取事件保留切片数据，实现下一次可以在原读取位置继续开始读取）
    this.readPartFile(this.loaded); //开启读取文件
    this.bindEvent();//绑定FileReader文件读取
}
//给切片读取对象原型上添加FileReader获取读取类型，开启读取文件
PartFileReader.prototype.readPartFile = function (start) {
    if (this.files.slice) {
        var file = this.files.slice(start, this.loaded + this.step);
        switch (this.type) {
        // 开始读取指定的 Blob中的内容，根据读取方式不同，result最后返回的数据也不同
            case 'readAsBinaryString' :	// result属性中将包含所读取文件的原始二进制数据。
                this.reader.readAsBinaryString(file);
                break;
            case 'readAsDataURL' :	// result属性中将包含一个data: URL 格式的 Base64 字符串以表示所读取文件的内容。
                this.reader.readAsDataURL(file);
                break;
            case 'readAsArrayBuffer' :	// result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象。
                this.reader.readAsArrayBuffer(file);
                break;
            case 'readAsText' : // 一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。
                this.readAsText(file);
                break;
        }
    }
}
//给切片读取对象原型上绑定FileReader对象事件
PartFileReader.prototype.bindEvent = function () {
    var self = this;
    this.reader.onloadstart = function (e) {    // FileReader.onloadstart 该事件在读取操作开始时触发。
        self.event.loadStart && self.event.loadStart.call(this, e);
    }
    this.reader.onprogress = function (e) { // FileReader.onprogress 该事件在读取Blob时触发。
        self.event.progress && self.event.progress.call(this, e);
    }
    this.reader.onload = function (e) { // FileReader.onload 该事件在读取操作完成时触发。
        // 切片读取文件有别于非切片读取，切片读取的文件读取状态需要在每个切片读取成功后再刷新读取进度
        self.loaded += e.loaded;
        self.event.load && self.event.load.call(this, e, self.loaded, self.total);
        if (self.loaded < self.total) {
            self.readPartFile(self.loaded);
        }
    }
    this.reader.onloadend = function (e) {  // FileReader.onloadend 该事件在读取操作结束时（要么成功，要么失败）触发。
        self.event.loadend && self.event.loadend.call(this, e);
    }
    this.reader.onabort = function (e) {   // FileReader.onabort 该事件在读取操作被中断时触发。
        self.event.abort && self.event.abort.call(this, e);
    }
}
function readFile(socket,file,obj) {
    console.log("文件",file);
    var reader = new PartFileReader(file, 'readAsArrayBuffer', {
        loadStart: function (e) {
           // progressTextObj.innerText = "正在读取文件(0%)...";
        },
        progress: function (e) {
        },
        load: function (e, loaded, total) {
            // 如果在读取的基础上写上传的话在这里获取读取成功的文件切片
            // e.target.result //当前文件切片的数据
            socket.send(e.target.result);
            // 拿到进度，做进度条
            obj.uploadSchedule = Math.round(loaded / total * 100);
            // if (obj.uploadSchedule < 100) {
            //     // progressTextObj.innerText = '正在读取文件(' + precent + '%)...';
            // } else 
            if (loaded >= total) {
                // progressTextObj.innerText = '文件读取完成(100%)';
                socket.send("end");
            }
        },
        loadend: function (e) {
        },
        abort: function (e) {
        },
        error: function (e) {
            // progressTextObj.innerText = "文件读取出错误(~0v0~)";
        }
    })
}
// function sleep(time) {
//     return new Promise(function (resolve) {
//         setTimeout(resolve, time);
//     });
// }
function openSocket(file,obj) {
    var socket
    if (typeof (WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    } else {
        console.log("您的浏览器支持WebSocket");
        //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
        // var userId = document.getElementById('userId').value;
        var socketUrl = "ws://192.168.1.24:8081/webSocket/" + obj.userName;
        // var socketUrl = "ws://localhost:8081/webSocket/" + name;
        console.log(socketUrl);
        if (socket != null) {
            socket.close();
            socket = null;
        }
        socket = new WebSocket(socketUrl);
        //打开事件
        socket.onopen = function () {
            console.log("websocket已打开",obj);
            readFile(socket,file,obj)
            // WebSocket链接成功建立，可以在这里进行后端交互
            //socket.send("这是来自客户端的消息" + location.href + new Date());
        };
        
        //获得消息事件
        socket.onmessage = function (msg) {
            var serverMsg = "收到服务端信息：" + msg.data;
            console.log(serverMsg);
            //发现消息进入    开始处理前端触发逻辑
        };
        //关闭事件
        socket.onclose = function () {
            console.log("websocket已关闭");
        };
        //发生了错误事件
        socket.onerror = function () {
            console.log("websocket发生了错误");
        }
    }
}
function closeSocket(socket) {if (socket != null) {
    socket.close();
    socket = null;
    }
}
export function uploadFilesW(file,obj){
    openSocket(file,obj)
 }

页面中使用

<template>
	<div>
		<input type="file" @change="fileChangeF($event,fileId)" />
	</div>
</template>
<script>
import { uploadFilesW } from "../../util/upfile"
export default {
  data(){
    return {
      expDialog:{ // 上传文件弹窗
        dialogVisible:false,
        cloudFile:null, // 云文件
        trajectoryFile:null, // 云文件
        explainFile:null, // 说明文件
        uploadSchedule:0, // 上传进度
        precentState:'',  // 文件上传状态 成功/失败
        showProgressBar:false,  // 进度条展示
        uploadBtncontent:1,
        isUpDisable: false,  // 一个上传完才可以上传下一个
      },
    }
  },
  methods:{
	fileChangeF(eve,type){  // 上传文件选择文件
	      console.log(eve.target.files,type);
	      let fi = eve.target.files
	      let self = this
	      let exp = self.expDialog
	      uploadFilesW(fi[0],this.expDialog)
	      console.log(exp);
	    },
     }
}
</script>

新增需求：对上传文件流进行加密，并传给后端做验证

原文连接：使用React框架 https://www.jb51.net/article/264653.htm

实现方式： fileReader读取文件并 使用md5加密文件

还是在同一个文件中，封装了方法进行调用

安装并引用spark-md5

需要先npm下载 spark-md5

npm i spark-md5 // 安装spark-md5

还是在upfile.js文件（也可以单独放一个文件）

import SparkMD5 from 'spark-md5';
function neverPromise(file) {
    return new Promise(resolve => {	// 因为使用fileReader读取文件是异步的，所以使用promise将加密之后的值返回方便传给后端
        let fileReader = new FileReader(),
        blobSlice =
            File.prototype.mozSlice ||
            File.prototype.webkitSlice ||
            File.prototype.slice,
        // chunkSize = 2097152,
        // read in chunks of 2MB
        chunkSize= 1024 * 1024 * 10,//1MB（单片大小/一兆）
        chunks = Math.ceil(file.size / chunkSize),
        currentChunk = 0,
        spark = new SparkMD5(),
        that = this,
        md5Str ;
        // console.log(Math.ceil(file.size / chunkSize),'file.size / chunkSize');
        // console.log(chunks,'chunks');
        fileReader.onload = function (e) {
            spark.appendBinary(e.target.result);
            // append binary string
            currentChunk++;
            if (currentChunk < chunks) {    // 切片读取完执行
                // 执行这个方法才能短时间内获取到加密后的md5文件？
                loadNext();
            } else {
                let md = spark.end();
                // console.log(file,'file');
                resolve(md.toUpperCase())	// 将数据返回
            }
        };
        function loadNext () {
            let start = currentChunk * chunkSize,
            end = start + chunkSize >= file.size ? file.size : start + chunkSize;
            console.log(blobSlice.call(file, start, end),'blobSlice.call(file, start, end)');
           // readAsBinaryString这个函数看MDN上说是已经弃用，readAsArrayBuffer来代替
           // 但是后来发现这两个函数读取完文件加密后的值不同，为了跟后端同步使用了readAsBinaryString
           // 
            fileReader.readAsBinaryString(blobSlice.call(file, start, end));
            // fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
        } 
        loadNext();
    })
}
// 在使用的地方调用即可
let md5Send = await neverPromise(file)// 方法记得加async
console.log(md5Send)	// 就可以拿到读取完并加密后的字符串
简单易懂的JSONP和CORS跨域方案详解
上一篇
最实用的正则表达式整理
下一篇