vue + up7 大文件上传插件

1. 将up7所用文件放到文件夹

2. index.html中 引入他up7需要文件

<template>
  <div id="up7-div"></div>
</template>

<script>

  export default {
    name: "httpUploader7",
    data() {
      return {
        upApp: null,
        file:{
          fileSelected:''
        }
      }
    },
    mounted() {
      //初始化up7
      const _this = this;
      this.upApp = new HttpUploaderMgr();
      this.$store.state.up7.cbMgr = this.upApp;
      //设置附加字段信息
      this.$store.state.up7.cbMgr.Config.Fields["uid"] = sessionStorage.getItem('userId');
      this.upApp.load_to("up7-div");

      window.vue = this;

      //加载完成 隐藏对话框
      this.upApp.event.loadComplete = this.loadComplete;
      this.upApp.event.md5Complete = this.md5Complete;
      this.upApp.event.updateUp7 = this.updateUp7;
      this.upApp.event.fileSelected = this.fileSelected;
      this.upApp.event.fileResume = this.fileResume;
      this.upApp.event.fileComplete = this.fileComplete;
      this.upApp.event.fileAppended = this.fileAppended;
      this.upApp.event.fdComplete = this.fdComplete;
      this.upApp.event.queueComplete = this.queueComplete;
    },
    destoryed() {
      //this.editor.destory();
    },
    methods: {
      open_file: function () { this.upApp.openFile(); },
      open_folder: function () { this.upApp.openFolder(); },

      loadComplete(){
        console.log('loadComplete');
        this.$store.state.up7.downExe = false
      },
      md5Complete(){
        console.log('md5Complete');
      },
      updateUp7(){
        console.log('updateUp7');
      },
      fileSelected(obj){
        //查看是否有重复文件
        for(var i =0; i<this.$store.state.up7.fileSelect.length;i++){
          if(obj.pathLoc == this.$store.state.up7.fileSelect[i].pathLoc){
            this.$Message.error('上传列表中已有【'+obj.pathLoc+'】文件，请勿重复上传！')
            return false;
          }
        }

        if(this.$store.state.up7.IfChangeFile != -1){
          //替换文件
          this.$store.state.up7.fileSelect[this.$store.state.up7.IfChangeFile].pathLoc= obj.pathLoc
          this.$store.state.up7.fileSelect[this.$store.state.up7.IfChangeFile].nameLoc= obj.nameLoc
          this.$store.state.up7.fileSelect[this.$store.state.up7.IfChangeFile].file= obj
          this.$store.state.up7.IfChangeFile = -1
        }
        else{
          //新增文件
          this.$store.state.up7.fileSelect.push({
            pathLoc: obj.pathLoc,
            nameLoc: obj.nameLoc,
            file: obj,
            options:{
              experimentOption:[],
              levelOption:[]
            },
            fields:{
              projectId: 0,
              projectName:'',
              experimentId: 0,
              experimentName:'',
              type: -1,
              typeName:'',
              level: -1,
              levelName:'',
              dataType: 0,
              dataTypeName:'试验报告',
              controlId: 0,
              controlName:'一级上传'
            }
            });
        }

      },
      fileResume: function (obj) {
        console.log('fileResume',obj);
      },
      fileComplete: function (obj) {
        console.log('fileComplete',obj);
        this.$store.state.up7.cbMgr.PostFirst();
      },
      fileAppended: function (obj) {
        console.log('fileAppended',obj);
        this.$store.state.up7.fileSelect = []
      },
      fdComplete: function (obj) {
        console.log('fdComplete',obj);
      },
      queueComplete:function(){
        console.log('queueComplete');
      }
    }
  }
</script>

<style scoped>

</style>

vuex

    up7:{
      cbMgr:'',
      downExe: true,
      updateExe: false,
      //选择待上传文件
      fileSelect:[],
      IfChangeFile: -1    //替换文件用
    },

3. 选择文件

this.$store.state.up7.cbMgr.autoAddFiles = false;
this.$store.state.up7.cbMgr.openFile();

4.上传文件

this.$store.state.up7.cbMgr.autoAddFiles = false;
this.$store.state.up7.cbMgr.openFile();