socket获取web服务器文件上传,websocket 文件上传(示例代码)

发送

{{progress}}

{{(endTime-startTime)/1000}}s

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 

// 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 

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;

};

}

}

};

.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;

}