1.下载jszip

npm i jszip -S  or  npm install jszip

 2.引入jszip

import JsZip from 'jszip'; 

3.

 <el-upload
            ref="elUpload"
            class="upload-demo"
            action="customize"
            :http-request="uploadSectionFile"
            multiple
            :limit="1"
            accept=".zip"
            :file-list="fileList"
            :auto-upload="false"
            :on-change="onchange"
            :on-exceed="handleExceed">
            <el-button class="uplodeBtton" ref="uplodeBtton" size="small" type="primary" @click="changeFile()" ></el-button>
            <div slot="tip" class="el-upload__tip">上传要求:仅支持zip压缩包,小于30MB;</div>
            <div slot="tip" class="el-upload__tip">模型格式:仅支持obj格式,贴图为jpg、png</div>
            <div slot="tip" class="el-upload__tip">文件目录:压缩包中obj文件不能被包含在文件夹中</div>
            </el-upload>

4.

onchange(file){
        console.log(file)
        this.modelForm.name = file.name;
        var idx = file.name.lastIndexOf(".");
        var type = file.name.substr(idx+1);
        var _this = this
        var _obj = Object
        //------是否是zip包---------//
        if(type==='zip'){
          const isLt2M = file.size / 1024 / 1024 < 30;
          if(!isLt2M) {
            //文件大小超过30M,报错
            this.$message({
              message: '上传文件大小不能超过 30MB!',
              type: 'warning'
            });
          }else{
            var new_zip = new JsZip();
                // console.log(new_zip.loadAsync(file.raw))
                  new_zip.loadAsync(file.raw)
                  .then(function(file) {
                      //----file压缩包里的内容----//
                      var _array = _obj.values(file.files);
                      //是否存在obj文件
                      var hasObjFile=false;
                      //obj文件被包在文件夹中
                      var hasdir=false;
                      for(var i = 0;i<=_array.length-1;i++){
                          var name =  _array[i].name;
                          var index = name.lastIndexOf(".");
                          var ext =  name.substr(index+1);
                          if(ext==='obj'){
                            hasObjFile=true;
                            // 文件路径出现两个及以上'/',则obj文件在3级目录中,外面有文件夹包裹
                            var num = name.split("/").length;
                              if(num>2){
                              //如果obj文件外层有包含dir,则抛出错误!
                                hasdir=true;
                                $(".uplodeBtton").addClass('distroy');
                                $(".uplodeBtton").removeClass("change");
                                _this.$refs.elUpload.abort();
                                _this.$refs.elUpload.clearFiles();
                                _this.$message.error("obj文件不在一级目录!")
                                break;
                            }else{
                              break;
                            }
                          }
                      }
                    
                        if(!hasObjFile){
                          //不包含obj文件
                          $(".uplodeBtton").addClass('distroy');
                          $(".uplodeBtton").removeClass("change");
                          _this.$refs.elUpload.abort();
                          _this.$refs.elUpload.clearFiles();
                          _this.$message.error("压缩包不包含obj文件!")
                        }else{
                          if(!hasdir){
                            _this.able=true
                            $(".uplodeBtton").addClass('change')
                            $(".uplodeBtton").removeClass('distroy')
                          }
                        }
                  }).catch(err=>{
                    //是否是合法的zip包,解决rar包改后缀zip
                    _this.$message.error("请上传正确格式的文件")
                  });
          }
        }else{
          _this.$refs.elUpload.abort();
          _this.$refs.elUpload.clearFiles();
          _this.$message.error("不是zip文件!")
        }
      }

 

Logo

前往低代码交流专区

更多推荐