props参数设置 props:{ files:{ type:Array },//图片数组 titleSrc:{ type:Boolean, default: tru_vue accept">
当前位置:   article > 正文

vue封装文件上传,accept类型拦截判断_vue accept

vue accept

input标签

<input type="file" @change="fileChanged" ref="file" multiple="multiple" :accept="accept" class="ivu-upload-input">
  • 1

props参数设置

	props:{
      files:{
        type:Array
      },//图片数组
      titleSrc:{
        type:Boolean,
        default: true
      },//是否可新增/删除
      accept:{
        type:String,
        default: 'image/png,image/jpeg,image/jpg'
      },//格式
      fileCount: {
        type: [String,Number],
        required: false,
        default: 1
      },//上传数量
      filetype:{
        type: [String,Number],
      },//上传功能type区分
      timestampName: {
        type: Boolean,
        required: false,
        default: false
      },//是否使用时间戳名称
      previewDisplay: {
        type: Boolean,
        required: false,
        default: false
      },//是否展示预览列表
    },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

data

 data() {
      return {
        uplist:[],
      }
    },
  • 1
  • 2
  • 3
  • 4
  • 5

方法

//父组件中通过 this.$refs.XX.add() 调用触发
 add() {
   this.$refs.file.value = '';
   this.$refs.file.click();
 },
 //本地上传change事件
      fileChanged() {
        const list = this.$refs.file.files;
        if (list.length>0){
          if (list.length>this.fileCount*1) {
            this.$message.warning('上传数量超限!');
            return
          }
          this.uplist = [];
          for (let i = 0; i < list.length; i++) {
            if (!this.typeJy(list[i]).status) {
              this.$message.warning(`上传格式仅支持${this.typeJy(list[i]).type.toString()}`);
              return
            }
            if (list[i].size>10*1024 * 1024) {
              this.$message.warning('上传大小不能超过10M!');
              return
            }
            const item = {
              name: list[i].name,
              size: list[i].size,
              file: list[i]
            };
            this.html5Reader(list[i], item);
            this.uplist.push(item);
          }
          this.$refs.file.value = '';
          this.submit();
        }

      },
      //格式判断
      typeJy(file){
        const imgFileType = this.accept.split(',');
        let type = [];
        for(let i=0;i<imgFileType.length;i++){
          let HZHUI = imgFileType[i].match(/[^\/||\.]+(?!.*\/)/)[0]
          type.push(HZHUI)
        }
        const filetype = file.name
        const suffix = filetype.substring(filetype.lastIndexOf('.')+1)
        //比较且不区分大小写
        if(!type.some(i=>i.toLowerCase()==suffix.toLowerCase())){
          return {
            status:false,
            type:type,
          }
        }else{
          return {
            status:true,
            type:type,
          }
        }
      },
       //上传oss
      submit() {
        let that=this;
        //  这里是OSS多条上传
        const fNum = this.uplist;
        for(let i=0;i<fNum.length;i++){
          let f=fNum[i].file;
          const Name=f.name;
          const suffix = Name.substr(Name.indexOf("."));
          const obj=this.timestamp();
          let storeAs;
          if (this.timestampName){//是否使用时间戳名称
            storeAs = 'salary/'+obj+i+'/'+obj+suffix ;// 路径+时间戳+后缀名
          }
          else{
            storeAs = 'salary/'+obj+i+'/'+Name ;// 路径+上传文件名称
          }

          that.upProms(f,i);
        }
      },
      // 异步
      upProms(f,i){
        let that = this;
        let time = new Date().getTime();
        let formData = new window.FormData();
        formData.append( 'file' , f );
        formData.append( 'name' , f.name );
        formData.append( 'time' , time );
        formData.append( 'type' , that.filetype );
        //调用上传接口
        postUploadFile(formData).then(function(res){
          if ( res.data.code ===0 ) {
            that.files.push(res.data.data);
            that.$set(that.uplist[i],'url',res.data.data)
            that.listResult();
          }

        })
      },

      // 时间戳
      timestamp:function(){
        const time = new Date();
        const y = time.getFullYear();
        const m = time.getMonth()+1;
        const d = time.getDate();
        const h = time.getHours();
        const mm = time.getMinutes();
        const s = time.getSeconds();
        const ms = time.getMilliseconds();
        return ""+y+this.Add0(m)+this.Add0(d)+this.Add0(h)+this.Add0(mm)+this.Add0(s)+this.Add0(ms);
      },
      //处理日期
      Add0:function(m){
        return m<10?'0'+m : m;
      } ,
      //给父组件返回数组
      listResult(){
        this.$emit("listResult",this.uplist)
      }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/283608?site
推荐阅读
相关标签
  

闽ICP备14008679号