抓拍大图层级修复v1

ZZJ

2021-09-28 5fb65ada8ccc28eabf823b284de70fbd3ca1f41e

 src/components/subComponents/FileUpload/index.vue

@@ -9,12 +9,46 @@
      @file-added="onFileAdded"

      @complete="onComplete"

    >

      <el-input :placeholder="uploadPlaceholder" size="small" :readonly="true" v-model="fileName">

      <!-- <uploader-drop v-if="isDrag == true">

        <div class="drag-txt">拖拽文件到这里</div>

        <span class="icon iconfont" @click.stop="showUpload = false"

          >&#xe70b;</span

        >

        <uploader-btn>选择文件</uploader-btn>

      </uploader-drop> -->



      <div class="up-bar" v-if="isDrag == true">

        <div class="name">{{ fileName || uploadPlaceholder }}</div>

        <uploader-btn slot="suffix">

          <el-tooltip :content="tipWords" placement="top" v-if="tip">

            <i class="el-icon-upload2" style="font-size:18px; color:#0088ff"></i>

            <div class="open-file-btn">

              <span class="icon iconfont">&#xe712;</span>

            </div>

          </el-tooltip>

          <i v-else class="el-icon-upload2" style="font-size:18px; color:#0088ff"></i>

        </uploader-btn>

        <!-- <div class="open-file-btn">

          <span class="icon iconfont">&#xe712;</span>

        </div> -->

      </div>

      <el-input

        :placeholder="uploadPlaceholder"

        v-if="isDrag == false"

        size="small"

        :readonly="true"

        v-model="fileName"

      >

        <uploader-btn slot="suffix">

          <el-tooltip :content="tipWords" placement="top" v-if="tip">

            <i

              class="el-icon-upload2"

              style="font-size: 18px; color: #0088ff"

            ></i>

          </el-tooltip>

          <i

            v-else

            class="el-icon-upload2"

            style="font-size: 18px; color: #0088ff"

          ></i>

        </uploader-btn>

      </el-input>

      <uploader-list />

@@ -32,7 +66,7 @@
      @close="closeHandle"

    >

      <uploader-btn ref="button" :sourceType="sourceType">

        <i class="el-icon-upload2" style="font-size:18px; color:#0088ff"></i>

        <i class="el-icon-upload2" style="font-size: 18px; color: #0088ff"></i>

        上传

      </uploader-btn>

      <uploader-list />

@@ -41,16 +75,18 @@
</template>



<script>

import uploader from "./uploader"

import SparkMD5 from 'spark-md5';

import UploaderBtn from "./btn"

import UploaderList from "./list"

import uploader from "./uploader";

import SparkMD5 from "spark-md5";

import UploaderBtn from "./btn";

import UploaderList from "./list";

import UploaderDrop from "./drop";



export default {

  components: {

    uploader,

    UploaderBtn,

    UploaderList

    UploaderList,

    UploaderDrop,

  },

  props: {

    sourceType: {

@@ -58,48 +94,47 @@
    },

    tip: {

      type: Boolean,

      default: false

      default: false,

    },

    tipWords: {

      type: String,

      default: ''

      default: "",

    },

    single: {

      type: Boolean,

      default: false

      default: false,

    },

    uploadPlaceholder: {

      type: String,

      default: ''

      default: "",

    },

    isDrag: {

      type: Boolean,

      default: false,

    },

    url: {

      type: String,

      default: "/data/api-f/file/upload" //"//192.168.20.10:3000/upload"

      default: "/data/api-f/file/upload",

    },

    attrs: {

      type: Object,

      default () {

        return {



        }

      }

    }

      default() {

        return {};

      },

    },

  },

  data() {

    return {

      fileName: "",

      fileMd5: "",

      // attrs: {

      //   accept: 'image/*'

      // },

      statusText: {

        success: '上传成功',

        error: '上传失败',

        uploading: '上传中',

        paused: '暂停中',

        waiting: '等待中'

      }

    }

        success: "上传成功",

        error: "上传失败",

        uploading: "上传中",

        paused: "暂停中",

        waiting: "等待中",

      },

    };

  },

  computed: {

    uploader() {

@@ -110,32 +145,37 @@
        target: this.url,

        testChunks: true,

        headers: {

          Authorization: sessionStorage.getItem('loginedInfo') && JSON.parse(sessionStorage.getItem('loginedInfo')).access_token

        }

      }

    }

          Authorization:

            sessionStorage.getItem("loginedInfo") &&

            JSON.parse(sessionStorage.getItem("loginedInfo")).access_token,

        },

      };

    },

  },

  methods: {

    onFileAdded(file) {

      if (this.single) {

        this.uploader.fileList = this.uploader.fileList.slice([-1]);

        this.$emit("file-added")

        this.$emit("file-added");

      }

      this.computeMD5(file);

    },

    computeMD5(file) {

      let fileReader = new FileReader();

      let time = new Date().getTime();

      let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;

      let blobSlice =

        File.prototype.slice ||

        File.prototype.mozSlice ||

        File.prototype.webkitSlice;

      let currentChunk = 0;

      const chunkSize = 10 * 1024 * 1000;

      let chunks = Math.ceil(file.size / chunkSize);

      let spark = new SparkMD5.ArrayBuffer();

      // 文件状态设为"计算MD5"

      this.statusText.paused = "准备上传,正在检查文件"

      this.statusText.paused = "准备上传,正在检查文件";

      file.pause();

      loadNext();

      fileReader.onload = (e => {

      fileReader.onload = (e) => {

        spark.append(e.target.result);

        if (currentChunk < chunks) {

          currentChunk++;

@@ -145,16 +185,16 @@
          this.computeMD5Success(md5, file);

          this.fileName = file.name;

          this.fileMd5 = md5;

          // console.log(`MD5计算完毕：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${file.size} 用时：${new Date().getTime() - time} ms`);

        }

      });

      };

      fileReader.onerror = function () {

        this.error(`文件${file.name}读取出错，请检查该文件`)

        this.error(`文件${file.name}读取出错，请检查该文件`);

        file.cancel();

      };

      function loadNext() {

        let start = currentChunk * chunkSize;

        let end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;

        let end =

          start + chunkSize >= file.size ? file.size : start + chunkSize;

        fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));

      }

    },

@@ -163,32 +203,33 @@
      if (location.href.indexOf("dataStack") >= 0) {

        Object.assign(this.uploader.opts, {

          query: {

            stackId: this.DataStackPool.selectedDir.id

            stackId: this.DataStackPool.selectedDir.id,

            // ...this.params,

          }

        })

          },

        });

      }

      file.uniqueIdentifier = md5;

      file.resume();

      this.statusText.paused = "暂停中";

    },

    onComplete() {

      this.$emit("complete", { filename: this.fileName, identifier: this.fileMd5 });

      this.$emit("complete", {

        filename: this.fileName,

        identifier: this.fileMd5,

      });

    },

    fileComplete() {

      // console.log('file complete', arguments)

    },

    fileComplete() {},

    closeHandle() {

      this.$emit("close")

    }

      this.$emit("close");

    },

  },

  mounted() {

    this.isDrag;

    this.$nextTick(() => {

      console.log(this.sourceType)

      window.uploader = this.$refs.uploader.uploader

    })

  }

}

      window.uploader = this.$refs.uploader.uploader;

    });

  },

};

</script>



<style lang="scss">

@@ -237,6 +278,26 @@
        display: none;

      }

    }



    .up-bar {

      height: 30px;

      margin: 25px;

      background: #f2f2f7;

      border-radius: 2px;

      display: flex;

      align-items: center;

      justify-content: space-between;

      box-sizing: border-box;

      padding: 0 20px;

      .iconfont {

        font-size: 16px;

        color: #333;

      }

      .name {

        color: #bdbdbd;

        font-size: 14px;

      }

    }

  }

}

</style>>