websocket 文件上传
Posted 浩
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了websocket 文件上传相关的知识，希望对你有一定的参考价值。
<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>
以上是关于websocket 文件上传的主要内容，如果未能解决你的问题，请参考以下文章
通过 WebSocket (BinaryWebSocketFrame) 和 Netty 上传文件
如何通过 Websocket 协议处理 GraphQL 中的文件上传？
WebSocket SpringBoot实现文件上传进度消息通知