文件的上传主要是用到了elementui中的组件,因为有些细节问题,初次使用时难免会忽略,所以在此分享下;
文件的下载主要是通过a连接的href属性来实现的,如果后台对传递的参数有要求,可以通过其他方式来处理,此处主要是通过 JSON.String() 和 base64 来进行转换和加密(貌似base64有加密的效果,一直忙于实现业务代码,如果有哪些地方说的不对的,敬请大神指正)
上传
elementui 官网上提供的组件是这样:
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
在我项目中的使用是这个样子滴:
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/" // 此处可以抽取,通过在data中定义变量
:limit="1"
:on-success="afterSuccess" // 通过在methods定义一个回调函数,来对文件上传返回的结果进行监听,afterSuccess中有三个固定的参数,分别是respose,file,fileList,具体如下图
name='file'> // 此处是项目中后台要求传递的参数
</el-upload>
优化上传地址的写法如下:
<el-upload
class="upload-demo"
:action="actionURL" // actionURL应该在data中先定义再使用
:limit="1"
:on-success="afterSuccess"
:name='file'>
</el-upload>
上传成功之后的回调函数
methods:{
afterSuccess(response,file,fileList) {
console.log(response) //返回的是上传之后后台返回的结果
}
}
下载
var blob = new Blob([],{type:'application/excel;charset=utf-8'})
var downloadElement = document.createElement('a')
var href = window.URL.createObjectURL(blob) //创建下载链接
let sendParams = Base64.encode(JSON.stringify('传递的参数')) // 可以省略 具体看业务需求
downloadElement.href = '接口地址'// 此处可以通过拼接字符串的方式传递参数
document.body.appendChild(downloadElement)
downloadElement.click() // 点击下载
document.body.removeChild(downloadElement) // 下载完成之后移除元素
window.URL.removeObjectURL(href) // 释放掉blob对象
注:如果需要用到base64,则需要按照网上教程进行安装,并在mian.js中进行相应的引入;本人目前涉及的是vue项目
网友评论