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实现文件上传进度消息通知

websocket 文件上传

HTML5 文件域+FileReader 分段读取文件并上传-WebSocket

HTML5 文件域+FileReader 分段读取文件并上传-WebSocket