美文网首页让前端飞
前端解压压缩包,获取压缩包内带中文文件名(element)

前端解压压缩包,获取压缩包内带中文文件名(element)

作者: 爱踢球的jerry | 来源:发表于2019-11-28 15:28 被阅读0次

    1、下载jszip

    npm i jszip -S
    

    2、包引入jszip

    import JsZip from 'jszip'; 
    

    3、upload组件

    <el-upload
        ref="upload"
        :data="formData"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        :headers="tokens"
        :on-change="addFile"
        :auto-upload="false"
        :before-upload="beforeUpload"
        :on-error="uploadError"
        :on-success="uploadSuccess"
        :limit="limit"
        :http-request="hanleUpload"
        :on-exceed="onExceed"
        action=""
        style="margin-left: 20px"
        class="upload-demo">
        <div slot="tip" class="el-upload__tip">选择上传文件,目前仅支持zip格式上传</div>
        <el-button ref="trigger" slot="trigger" size="small" type="primary">添加文件</el-button>
        <el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">开始上传</el-button>
      </el-upload>
    

    4、在handle-change回调中书写业务逻辑

    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);
      })
    

    5、如果要获取中文名的文件,需要解码一下

    this.fileList = fileList
      // 文件大小
      const fileSize = file.size / 1024 / 1024
      console.log(file)
      const _this = this
      const zip = new JSZip()
      // 获取zip包内容
      var iconv = require('iconv-lite')
      zip.loadAsync(file.raw, {
        decodeFileName: function(bytes) {
          return iconv.decode(bytes, 'cp936')
        }
      }).then(function(zip) {
          console.log(zip)
          // 获取压缩包里面的文件名(11/37152519950731531X_正.jpg)
        const arr = Object.keys(zip.files)
      })

    相关文章

      网友评论

        本文标题:前端解压压缩包,获取压缩包内带中文文件名(element)

        本文链接:https://www.haomeiwen.com/subject/jzebwctx.html