今天产品经理又提了一个需求.

在系统中上传文件时,需要支持多文件和文件夹上传,并且需要在文件上传时需要将多文件压缩成zip包,下载的时候,直接下载zip包

听到这个需求,我的第一反应就是js应该没有强大吧,因为压缩和访问文件夹,涉及到了文件系统的读取和修改,后来经过一番探索还真让我给实现出来了.

主要用到的库是 jszip

 则  则这里简单对jszip做下简单介绍,更详细的功能和api请移步官网.

jszip是是一个创建,读取和写入.zip文件的js库, api优化,简单
浏览器支持

实现思路如下:

1:用户选中文件或文件夹后,获取文件对象,

2:遍历获取的文件对象 放入实例化的zip对象中

3:使用generateAsync()方法生成文件, 通过formdata提交到服务端

代码如下:

此案例支持拖拽上传多个文件, 支持选择多个文件,选择单个文件夹  此外可以使用 file-saver库的saveAs对zip文件包保存到本地

  

   

    

     

    
    

     

      <template>
     
    
   

    

     

    
    

     
  <div class="home">
     
    
   

    

     

    
    

     
    <img alt="Vue logo" src="../assets/logo.png">
     
    
   

    

     

    
    

     

          文件压缩上传案例
     
    
   

    

     

    
    

     
    <label name="myfile" for="myfile" style="display:block;width:200px;height:200px;border:1px solid #ddd"
     
    
   

    

     

    
    

     
      :class="{'is-dragover': dragover}"
     
    
   

    

     

    
    

     

            @drop.prevent="onDrop"
     
    
   

    

     

    
    

     

            @dragover.prevent="onDragover"
     
    
   

    

     

    
    

     

            @dragleave.prevent="dragover = false">
     
    
   

    

     

    
    

     
      <input type="file" id="myfile" multiple webkitdirectory @change="selectFile" />
     
    
   

    

     

    
    

     
    </label>
     
    
   

    

     

    
    

     
  </div>
     
    
   

    

     

    
    

     

      </template>
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      <script>
     
    
   

    

     

    
    

     

      // @ is an alias to /src
     
    
   

    

     

    
    

     

      import JSZip from 'jszip'
     
    
   

    

     

    
    

     

      import axios from 'axios'
     
    
   

    

     

    
    

     

      import { saveAs } from 'file-saver'
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      export default {
     
    
   

    

     

    
    

     
  name: 'home',
     
    
   

    

     

    
    

     
  components: {},
     
    
   

    

     

    
    

     

        data () {
     
    
   

    

     

    
    

     
    return {
     
    
   

    

     

    
    

     
      dragover: false
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     

        mounted () {
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     
  methods: {
     
    
   

    

     

    
    

     

          selectFile (even) {
     
    
   

    

     

    
    

     
      var files = even.target.files
     
    
   

    

     

    
    

     
      this.commmon(files)
     
    
   

    

     

    
    

     

          },
     
    
   

    

     

    
    

     

          onDrop (even) {
     
    
   

    

     

    
    

     
      this.dragover = false
     
    
   

    

     

    
    

     
      var files = even.dataTransfer.files
     
    
   

    

     

    
    

     
      this.commmon(files)
     
    
   

    

     

    
    

     

          },
     
    
   

    

     

    
    

     

          commmon (files) {
     
    
   

    

     

    
    

     
      var zip = new JSZip()
     
    
   

    

     

    
    

     
      for (var i = 0; i < files.length; i++) {
     
    
   

    

     

    
    

     
        var f = files[i]
     
    
   

    

     

    
    

     

              zip.file(f.name, f)
     
    
   

    

     

    
    

     

            }
     
    
   

    

     

    
    

     

            zip.generateAsync({ type: 'blob' })
     
    
   

    

     

    
    

     

              .then(function (content) {
     
    
   

    

     

    
    

     
          saveAs(content, 'example.zip')
     
    
   

    

     

    
    

     
          let formData = new FormData()
     
    
   

    

     

    
    

     

                formData.append('file', content)
     
    
   

    

     

    
    

     
          axios({
     
    
   

    

     

    
    

     
            method: 'post',
     
    
   

    

     

    
    

     
            url: '/framework/file/create',
     
    
   

    

     

    
    

     
            data: formData,
     
    
   

    

     

    
    

     
            withCredentials: true, // 默认的
     
    
   

    

     

    
    

     
            headers: {
     
    
   

    

     

    
    

     
              'Content-Type': 'application/x-www-form-urlencoded'
     
    
   

    

     

    
    

     

                  }
     
    
   

    

     

    
    

     

                })
     
    
   

    

     

    
    

     

              })
     
    
   

    

     

    
    

     

          },
     
    
   

    

     

    
    

     

          onDragover () {
     
    
   

    

     

    
    

     
      this.dragover = true
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

        }
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      </script>
     
    
   

    

     

    
    

     

      <style lang="scss">
     
    
   

    

     

    
    

     

      .is-dragover{
     
    
   

    

     

    
    

     
  border: 2px solid red !important
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      </style>
     
    
  
 

  
 
 

这里说一下拖拽上传文件, 主要是用到的原生事件是这三个

 ondrop      ondragover      ondragleave

加上prevent 可以防止拖拽过程,浏览器 直接打开文件,阻止事件默认行为.

在ondragover的事件上可以处理文件拖拽到了可放置的元素上,对用户 进行友好提示.

ondrop     事件是文件拖拽到了元素上,松开鼠标时触发, 这个时候可以通过事件拿到拖拽的文件列表 使用even.dataTransfer.files 

jszip库的常用api是这两个

file(name, data [,options]) :创建zip文件,可以放入多个文件,支持多种文件格式String/ArrayBuffer/Uint8Array/Buffer/Blob/Promise/Nodejs stream,

Content of options :

generateAsync(options[, onUpdate]): 生成一个完整的zip的文件在当前文件目录 返回一个promise

Arguments

type option

Possible values for type :

• base64: the result will be a string, the binary in a base64 form.
• binarystring (or string, deprecated): the result will be a string in “binary” form, using 1 byte per char (2 bytes).
• array: the result will be an Array of bytes (numbers between 0 and 255) containing the zip.
• uint8array: the result will be a Uint8Array containing the zip. This requires a compatible browser.
• arraybuffer: the result will be a ArrayBuffer containing the zip. This requires a compatible browser.
• blob: the result will be a Blob containing the zip. This requires a compatible browser.
• nodebuffer: the result will be a nodejs Buffer containing the zip. This requires nodejs.

能不能做,要想看这个库的api具不具备将文件转化为zip文件,通过以上两个api,可以得知这个库是支持的.

jszip库api

另外jszip库也支持读取本地和远程的zip文件返回内部文件目录,文件名.等信息,有兴趣的朋友可以去尝试一下

文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。

原文链接：fizzz.blog.csdn.net/article/details/101523593