<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) {