<template> <div class=”pad20″> <input id=”file” ref=”file” type=”file” />
<button id=”send” @click=”send”>发送</button>
<div id=”progress”>{{progress}}</div> <div>{{(endTime-startTime)/1000}}s</div> </div> </template>
<script> import { mapGetters, mapActions } from “vuex”;
export default { name: “HelloWorld”, components: {}, data() { return { progress: “”, startTime: “”, endTime: “” }; }, created() { var that = this; }, mounted() { var that = this; that.websocket(); }, computed: { …mapGetters([“device”]) }, methods: { …mapActions([“ToggleDevice”]), send: function() { fileList = this.$refs.file.files; console.log(fileList); file = fileList[0]; this.startTime = new Date().getTime(); ws.send(“begin”); }, websocket: function() { var that = this; window.ws = “”; var paragraph = 1024 * 1024; //var paragraph = 1024; window.fileList = []; window.file = “”; window.startSize = 0; window.endSize = 0; window.i = 0; window.j = 0;
ws = new WebSocket( “ws://10.8.106.52:50000/platform/api/websocket/” + this.utils.localstorage_get(“userInfo”)[“id”] ); //连接成功建立后响应 ws.onopen = function() { console.log(“成功连接到”); //ws.send(Math.random()) }; //收到服务器消息后响应 var log = console.log; window.onmessFN = function(flag) { console.log(“传输”); that.endTime = new Date().getTime(); if (endSize < file.size) { // console.log(“file.size:” + file.size); startSize = endSize; endSize += paragraph; // console.log(“startSize:” + startSize); // console.log(“endSize:” + endSize); //console.log(“file—haha—-:” + file); that.progress = Math.round((startSize / file.size) * 10000) / 100.0 + “%”; if (file.webkitSlice) { var blob = file.webkitSlice(startSize, endSize); } else if (file.mozSlice) { var blob = file.mozSlice(startSize, endSize); } else { var blob = file.slice(startSize, endSize); } var reader = new FileReader(); reader.readAsArrayBuffer(blob); reader.onload = function loaded(evt) { var ArrayBuffer = evt.target.result; log(“发送文件第” + i++ + “部分”); //console.log(evt.target.result) ws.send(ArrayBuffer); }; } else { ws.send(“end”);
that.progress = “100%”; // console.log(“endSize >= file.size–>” + e.data + “<—“); // console.log(“endSize >= file.size–>endSize:” + endSize); console.log(“endSize >= file.size–>file.size:” + file.size); startSize = endSize = 0; i = 0; log(“发送” + file.name + “完毕”); log(“发送文件完毕”);
function get_filemd5sum(ofile) { var file = ofile; var tmp_md5; var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice, // file = this.files[0], chunkSize = 8097152, // Read in chunks of 2MB chunks = Math.ceil(file.size / chunkSize), currentChunk = 0, spark = new SparkMD5.ArrayBuffer(), fileReader = new FileReader();
fileReader.onload = function(e) { // console.log(‘read chunk nr‘, currentChunk + 1, ‘of‘, chunks); spark.append(e.target.result); // Append array buffer currentChunk++; var md5_progress = Math.floor((currentChunk / chunks) * 100);
if (currentChunk < chunks) { loadNext(); } else { tmp_md5 = spark.end();
console.log(“#####”, tmp_md5); } };
fileReader.onerror = function() { console.warn(“oops, something went wrong.”); };
function loadNext() { var start = currentChunk * chunkSize, end = start + chunkSize >= file.size ? file.size : start + chunkSize; fileReader.readAsArrayBuffer(blobSlice.call(file, start, end)); } loadNext(); }
console.log(“$$$$”, get_filemd5sum(file)); } }; ws.onmessage = function(e) { console.log(“服务器说” + e.data); if (e.data == “ok”) { window.onmessFN(); } }; //连接关闭后响应 ws.onclose = function() { console.log(“关闭连接”); ws = null; }; } } }; </script>
<!– Add “scoped” attribute to limit CSS to this component only –> <style scoped> .ivu-layout-header { background: white; } .searchInput { width: 250px; } .searchCon { position: relative; } .pop { position: absolute; left: 0; bottom: -2px; } .popin { width: 250px; } .seletItem { cursor: pointer; } .cardCon { padding-left: 20px; } .wordline { font-size: 12px; } .barChart { width: 100%; height: 250px; } .formteshu table td { padding: 3px 7px; text-align: right; } .search { width: 100%; margin-bottom: 10px; } .search td { padding: 4px 5px; } </style>