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>