压缩包文件拖另一个服务器,js不借助后端,多文件拖拽压缩上传,支持选择文件夹...-CSDN博客

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

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

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

主要用到的库是 jszip

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

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

浏览器支持

AAffA0nNPuCLAAAAAElFTkSuQmCC

实现思路如下:

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

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

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

代码如下:

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

文件压缩上传案例

// @ is an alias to /srcimport 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.filesthis.commmon(files)},onDrop (even) {this.dragover = falsevar files = even.dataTransfer.filesthis.commmon(files)},commmon (files) {var zip = new JSZip()for (var i = 0; i

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

ondrop ondragover ondragleave

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

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

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

jszip库的常用api是这两个

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

type

descriptionname

string

the name of the file. You can specify folders in the name : the folder separator is a forward slash (“/”).

data

String/ArrayBuffer/Uint8Array/Buffer/Blob/Promise/Nodejs stream

the content of the file.

options

object

the options.

Content of options :name

type

default

descriptionbase64

boolean

false

set to true if the data is base64 encoded. For example image data from a element. Plain text and HTML do not need this option. More.

binary

boolean

false

set to true if the data should be treated as raw content, false if this is a text. If base64 is used, this defaults to true, if the data is not a string, this will be set to true. More.

date

the current date

the last modification date. More.

compression

string

null

If set, specifies compression method to use for this specific file. If not, the default file compression will be used, see generateAsync(options). More.

compressionOptions

object

null

the options to use when compressing the file, see generateAsync(options). More.

comment

string

null

The comment for this file. More.

optimizedBinaryString

boolean

false

Set to true if (and only if) the input is a “binary string” and has already been prepared with a 0xFF mask.

createFolders

boolean

true

Set to true if folders in the file path should be automatically created, otherwise there will only be virtual folders that represent the path to the file. More.

unixPermissions

16 bits number

null

The UNIX permissions of the file, if any. More.

dosPermissions

6 bits number

null

The DOS permissions of the file, if any. More.

dir

boolean

false

Set to true if this is a directory and content should be ignored. More.