让前端飞

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

2019-11-28  本文已影响0人  爱踢球的jerry

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)
  })
上一篇下一篇

猜你喜欢

热点阅读