zhangzengfei
2022-07-20 4a800a8fc83c6bd1f86a8e847b079a51a7532c09
src/components/subComponents/FileUpload/uploader.vue
@@ -3,20 +3,19 @@
    <!-- <div class="close" @click="closeHandle">x</div> -->
    <slot :files="files" :file-list="fileList" :started="started">
      <uploader-unsupport></uploader-unsupport>
      <uploader-drop>
        <!-- <p>拖动文件到该区域上传</p> -->
      <UploaderDrop>
        <p>拖动文件到该区域上传</p>
        <uploader-btn >选择文件</uploader-btn>
        <uploader-btn :directory="true" >选择文件夹</uploader-btn>
      </uploader-drop>
      </UploaderDrop>
      <uploader-list></uploader-list>
    </slot>
  </div>
</template>
<script>
//import Uploader from 'simple-uploader.js'
//require('./common/uploader-simple')
import './common/uploader-simple'
import Uploader from 'simple-uploader.js'
import { kebabCase } from './common/utils'
import UploaderBtn from './btn.vue'
import UploaderDrop from './drop.vue'
@@ -34,19 +33,6 @@
    return {
      uploader: this
    }
  },
  watch:{
    attrs:{
      handler(n,o){
        console.log('uploader attrs update',n)
        //this.$nextTick(()=>{
          this.unBindUploader();
          this.bindUploader();
        //})
      },
      deep: true
    },
  },
  props: {
    attrs: {
@@ -134,54 +120,31 @@
    },
    closeHandle() {
      this.$emit("close")
    },
    bindUploader(){
      console.log('new Uploader')
      this.options.initialPaused = !this.autoStart
      const uploader = new Uploader(this.options)
      this.uploader = uploader
      this.uploader.fileStatusText = this.fileStatusText
      uploader.on('catchAll', this.allEvent)
      uploader.on(FILE_ADDED_EVENT, this.fileAdded)
      uploader.on(FILES_ADDED_EVENT, this.filesAdded)
      uploader.on('fileRemoved', this.fileRemoved)
      uploader.on('filesSubmitted', this.filesSubmitted)
    },
    unBindUploader(){
      const uploader = this.uploader
      uploader.off('catchAll', this.allEvent)
      uploader.off(FILE_ADDED_EVENT, this.fileAdded)
      uploader.off(FILES_ADDED_EVENT, this.filesAdded)
      uploader.off('fileRemoved', this.fileRemoved)
      uploader.off('filesSubmitted', this.filesSubmitted)
      this.uploader = null
    }
  },
  created() {
    console.log('uploader attrs',this.attrs);
    this.bindUploader();
    // this.options.initialPaused = !this.autoStart
    // const uploader = new Uploader(this.options)
    // this.uploader = uploader
    // this.uploader.fileStatusText = this.fileStatusText
    // uploader.on('catchAll', this.allEvent)
    // uploader.on(FILE_ADDED_EVENT, this.fileAdded)
    // uploader.on(FILES_ADDED_EVENT, this.filesAdded)
    // uploader.on('fileRemoved', this.fileRemoved)
    // uploader.on('filesSubmitted', this.filesSubmitted)
    // console.log('uploader attrs',this.attrs);
    // this.bindUploader();
    this.options.initialPaused = !this.autoStart
    const uploader = new Uploader(this.options)
    this.uploader = uploader
    this.uploader.fileStatusText = this.fileStatusText
    uploader.on('catchAll', this.allEvent)
    uploader.on(FILE_ADDED_EVENT, this.fileAdded)
    uploader.on(FILES_ADDED_EVENT, this.filesAdded)
    uploader.on('fileRemoved', this.fileRemoved)
    uploader.on('filesSubmitted', this.filesSubmitted)
  },
  mounted(){
    //this.bindUploader();
  mounted() {
  },
  destroyed() {
    this.unBindUploader();
    // const uploader = this.uploader
    // uploader.off('catchAll', this.allEvent)
    // uploader.off(FILE_ADDED_EVENT, this.fileAdded)
    // uploader.off(FILES_ADDED_EVENT, this.filesAdded)
    // uploader.off('fileRemoved', this.fileRemoved)
    // uploader.off('filesSubmitted', this.filesSubmitted)
    // this.uploader = null
    const uploader = this.uploader
    uploader.off('catchAll', this.allEvent)
    uploader.off(FILE_ADDED_EVENT, this.fileAdded)
    uploader.off(FILES_ADDED_EVENT, this.filesAdded)
    uploader.off('fileRemoved', this.fileRemoved)
    uploader.off('filesSubmitted', this.filesSubmitted)
    this.uploader = null
  },
  components: {
    UploaderBtn,
@@ -201,4 +164,5 @@
    cursor: pointer;
  }
}
</style>