文章目录
1、请求文件流,并下载
1.1、 请求文件流
request({
url:'/file/download',
method:'post',
responseType:'blob',//该参数一定要加,不然无法获取文件
data:{id:'1'}//参数,当然这个看接口定义
}).then(res=>{
}).catch(err=>{
})
1.2、 下载文件流
request({
url:'/file/download',
method:'post',
responseType:'blob',
data:{id:'1'}
}).then(res=>{
const content = res.data
const blob = new Blob([content], { type: "application/zip" })
const fileName = 'download.zip'
const elink = document.createElement('a')
if ('download' in elink) { // 非IE下载
elink.download = fileName
elink.style.display = 'none'
elink.href = window.URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
window.URL.revokeObjectURL(elink.href) // 释放URL 对象
document.body.removeChild(elink)
} else { // IE10+下载
navigator.msSaveBlob(blob, fileName)
}
})
2、文件流上传
2.1 选取本地文件
利用表单的type为file选取本地文件
<template>
<div>
文件压缩上传案例
<label name="myfile" for="myfile"
: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>
import JSZip from 'jszip'
import axios from 'axios'
export default {
data () {
return {
dragover: false
}
},
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) {
},
onDragover () {
this.dragover = true
}
}
}
</script>
<style lang="scss">
.is-dragover{
border: 2px solid red !important
}
</style>
2.2 压缩文件
2.2.1 blob对象
commmon (files) {
const blob = new Blob([files], { type: "application/zip" })
}
压缩文件的时候刚开始的时候我利用Blob对象进行压缩,这里注意的一点是用这个方法压缩会将文件成一个文件,就是你有 file1.txt、file2.txt两个文件,压缩后会合并成一个压缩包zipFile.zip。而不是一般情况下的压缩包里面有两个文件file1.txt,flie2.txt
2.2.2 jszip压缩
上面提到问题,如果我们需要压缩多个文件呢?这里可以使用插件 jszip,来压缩。这部分使用jszip一些方法的使用,会有单独章节来说下。这里就这是介绍我在项目中的使用
当然首先你要先下载这个依赖,再引入
npm i jszip --save
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' })//压缩文件,异步方法,返回的是一个Promise对象
.then(function (content) {
/*这里的content是一个Blob对象,
但是直接发送给后端的话是一个名‘Blob’没有后缀的文件,
如果后端需要一个有后缀的文件,需要file对象生成新的文件对象
*/
const newFile=new file([content],'blob.zip')
})
}
2.3 上传文件
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) {
const newFile=new file([content],'blob.zip')
//上传
let formData = new FormData()
formData.append('file', newFile)
axios({
method: 'post',
url: '/file/create',
data: formData,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'//记得这个一定要加
}
})
})
}
2.3.1、file对象
file 对象
File() 返回一个新构建的文件对象(File)
const newFile=new file([content],'blob.zip')
附录
1、请求函数 request
import axios from 'axios'
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
})
// request interceptor
service.interceptors.request.use(
config => {
// do something before request is sent
return config
},
error => {
// do something with request error
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
response => {
const res = response.data
// if the custom code is not 20000, it is judged as an error.
if (res.code !== 20000) {
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
return Promise.reject(error)
}
)
export default service