数据栈文件上传动态限制类型调试,标注切换摄像机获取底图

hanbaoshan

2020-10-27 da98d2a8a686cde09b20345e4a2b55a85410fde4

 src/components/subComponents/FileUpload/index.vue

@@ -5,12 +5,13 @@
      ref="uploader"

      :options="options"

      :file-status-text="statusText"

      :attrs="attrs"

      class="uploader-single"

      @file-added="onFileAdded"

      @complete="onComplete"

    >

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

        <uploader-btn slot="suffix" >

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

@@ -23,6 +24,7 @@
    <uploader

      v-else

      ref="uploader"

      :attrs="attrs"

      :options="options"

      :file-status-text="statusText"

      class="uploader-example"

@@ -31,7 +33,7 @@
      @complete="onComplete"

      @close="closeHandle"

    >

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

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

        上传

      </uploader-btn>

@@ -53,6 +55,10 @@
    UploaderList

  },

  props: {

    acptTypes: {

      type: String,

      default: ''

    },

    tip: {

      type: Boolean,

      default: false

@@ -73,14 +79,22 @@
      type: String,

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

    },

    attrs: {

      type: Object,

      // default () {

      //   return {



      //   }

      // }

    }

  },

  data() {

  data () {

    return {

      fileName: "",

      fileMd5: "",

      attrs: {

        accept: 'image/*'

      },

      // attrs: {

      //   accept: 'image/*'

      // },

      statusText: {

        success: '上传成功',

        error: '上传失败',

@@ -91,10 +105,10 @@
    }

  },

  computed: {

    uploader() {

    uploader () {

      return this.$refs.uploader.uploader;

    },

    options() {

    options () {

      return {

        target: this.url,

        testChunks: true,

@@ -105,14 +119,14 @@
    }

  },

  methods: {

    onFileAdded(file) {

    onFileAdded (file) {

      if (this.single) {

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

        this.$emit("file-added")

      }

      this.computeMD5(file);

    },

    computeMD5(file) {

    computeMD5 (file) {

      let fileReader = new FileReader();

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

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

@@ -141,13 +155,13 @@
        this.error(`文件${file.name}读取出错，请检查该文件`)

        file.cancel();

      };

      function loadNext() {

      function loadNext () {

        let start = currentChunk * chunkSize;

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

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

      }

    },

    computeMD5Success(md5, file) {

    computeMD5Success (md5, file) {

      // 将自定义参数直接加载uploader实例的opts上

      // if (this.$route.path.indexOf("VideoManage") >= 0) {

      //   Object.assign(this.uploader.opts, {

@@ -170,19 +184,20 @@
      file.resume();

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

    },

    onComplete() {

    onComplete () {

      debugger

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

    },

    fileComplete() {

    fileComplete () {

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

    },

    closeHandle() {

    closeHandle () {

      this.$emit("close")

    }

  },

  mounted() {

  mounted () {

    this.$nextTick(() => {

      console.log(this.acptTypes)

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

    })

  }

@@ -191,10 +206,11 @@


<style lang="scss">

.file-uploader {

  .el-input__suffix,.el-input__suffix-inner{

    outline: none!important;

  .el-input__suffix,

  .el-input__suffix-inner {

    outline: none !important;

  }

  .el-tooltip.focusing{

  .el-tooltip.focusing {

    outline: none;

  }

  .uploader-example {

@@ -223,7 +239,7 @@
      display: none;

    }

    .uploader-btn {

      border: 0px;  
      border: 0px;

    }

    .uploader-file {

      height: 2px;