前言
在后台管理系统中,我们经常会遇到excel的上传和下载,那么el-upload会有很多的坑,比如图片闪动,excel上传替换等等
所以在使用el-upload时,也踩了很多的坑,共勉
一、图片上传
我们需要对接口请求做一步处理,添加一个isImport作为判断条件
在request.js文件中修改请求头
<el-form-item label="上传照片" prop="taobaoimageUrl" v-if="Taobao"> <el-upload class="avatar-uploader" action="" ref="taobaoupload" multiple :limit="3" :file-list="taobaofileLists" :on-change="taobaohandleChange" :on-progress="taobaohandleFileUploadProgress" :on-success="taobaohandleFileSuccess" :show-file-list="true" :auto-upload="false" :on-remove="taobaohandleRemove" list-type="picture-card" :class="{ hide: santaobao }" accept="image/*"> <i class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </el-form-item>1.图片上传(组件介绍)
比如,我写了一个简单的el-upload组件
我先介绍一下,里面的内容
multiple 是否支持多选上传 , limit 限制了上传的最大文件个数
file-list 就是绑定的文件列表 , on- 都是事件
show-file-list 是否显示列表信息 auto-upload 是否自动上传提交
list-type 就是设置图片(缩略图)的排列方式
accept 限制文件格式
2.上传图片前的思考
做完上面的介绍,相比都有所了解el-upload这个组件的
其实效果的实现,就是结合事件进行触发的
在我写的里面,用处最大的就是组件的change和remove事件
比如我触发了,请求接口,将图片储存起来,获取url的路径等等
或者呢,当我们删除的时候,图片应该消失,或者当我们设置了最大3张,隐藏组件等等
3.实战流程
我们需要定义两个数组,因为el-upload的照片上传,会有一个默认的数组,里面会存放uid等字段,当我们请求接口上传时,我们再赋值这个数组,就会发现图片有闪动(会先向右一下,再回来)
这个问题的出现其实就是,我们的赋值,让组件认为uid匹配有新的数据加入
我们需要做的就是定义两个数组
一个数组是绑定文件列表,一个数组绑定后端数据
3.1 定义数组
data() { return { deadfileList: [], deadfileLists: [] }}3.2 查看change事件和remove事件
上传图片change事件
这个事件中我们可以获取图片信息,进行判断,比如图片大小限制,比如图片格式限制等等
我们获取到文件信息之后,我们需要将数据编译成键值对的格式传给后端
所以, new了一个FormData对象
这时候,我们还要判断这个文件是都等于3
如果等于3就将组件隐藏掉
// 导入图片deadhandleChange(ev,fileList) { // ev 单只照片的信息 // fileList 多张照片的数组 const ve = ev.raw.type.substring(0,ev.raw.type.indexOf('/')) const isJPG = ve === 'image'; const isLt2M = ev.raw.size / 1024 / 1024 < 10; if (!isJPG) { this.$message.error('请上传正确图片'); fileList.pop() return } if (!isLt2M) { this.$message.error('上传图片大小不能超过 10MB!'); fileList.pop() return } let fordata = new FormData() fordata.append('file',ev.raw) if(fileList.length == 3) { this.sandead = true } uploadFile(fordata).then(res => { let ossBucketHost = this.$store.getters.ossBucketHost this.deadfileList.push({url: ossBucketHost + res.objectName, name: res.objectName, ev}) })},3张取片进行隐藏
.hide { .el-upload--picture-card { display: none !important; }}如果我们对上传的照片进行删除,我们会触发remove事件
那么remove这个做了什么呢
3.3 remove删除事件
我们点击删除,需要对传给后端的数组数据进行更新,还需要将加号展示出来
deadhandleRemove(file, fileList) { console.log(file, fileList,'死淘'); if(fileList.length < 3) { this.sandead = false } this.deadfileList.forEach((ele,index) => { if(ele.ev.uid === file.uid) { this.deadfileList.splice(index,1) } }) },这样一个上传图片的功能就实现啦
二、excel上传
在后台中,我们也是经常会用到的excel的上传和下载
那么该功能如何实现呢
也是使用el-upload组件
这时候,也需要我们去触发两个事件,一个change事件和remove事件
1.excel文件上传前的思考
我们上传文件,如果类型不对了怎么办
如果大小超出了怎么办
如果只允许上传一张,超出了怎么办等等
2.实战流程
2.1 定义数组
handList: [], // 批量导入handlist列表信息2.2 组件
<el-upload class="upload-demo" drag action="" ref="upload" multiple :limit="1" :on-change="handleChange" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :on-exceed="handleFileExceed" :show-file-list="true" :auto-upload="false" :file-list="handList" accept=".xlsx, .xls"> <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> --> </el-upload>上面组件中的参数相比大家已经不陌生了
在这里最有用处的事件就是change事件,文件超出事件
2.3 上传excel触发的change事件
我们上传文件之后,会立即触发change事件,会返回给我们一个文件对象,一个文件列表数组
我们拿到这个文件,需要对类型进行控制
所以我使用字符串的截取判断是否是xlsx类型
为什么要使用list.pop清空最后一个数据,是因为我打印出来,不管我上传成功或者失败,list这个文件列表数组总会将该文件加入进来
// 导入文件 handleChange(ev,list) { console.log(ev,'导入文件') console.log(list,"发生变化") var testmsg = ev.name.substring(ev.name.lastIndexOf('.') + 1) // let whit = [ 'xlsx', 'xls' ] const extension2 = testmsg === 'xlsx' // const extension2 = whit.includes(testmsg) if (!extension2) { this.$message({ message: '上传文件只能是xlsx格式!', type: 'warning' }) list.pop() return } else { this.file = ev.raw this.handList = list } },2.4 上传文件如果超出限制了怎么办?
我们超出限制了,需要将最新的文件进行展示
所以我们使用了超出限制的钩子函数
对该超出的文件进行判断,然后将得到的最新文件push进来即可
// 超出限制 handleFileExceed(file,fileList) { console.log(file,'超出限制') var testmsg = file[0].name.substring(file[0].name.lastIndexOf('.') + 1) const extension2 = testmsg === 'xlsx' if (!extension2) { this.$message({ message: '上传文件只能是xlsx格式!', type: 'warning' }) return } else { this.file = file[0] this.handList = [] this.handList.push(file[0]) } },2.5 点击确定之后,文件如何传给后端
点击确定之后,我们需要判断一个有没有这个文件
如果有需要将文件已formdata格式传过去
如果传入成功了,我们需要将文件清空,然后将列表清空,提示用户,将弹窗关闭等逻辑
// 点击导入确定 submitFileForm() { if (!this.file) { this.$message({ message: '请先上传文件', type: 'warning' }) return } let params = new FormData() params.append('file', this.file) console.log(params,'params') console.log(params.get('file')) importWeight(params).then(res => { if (res.state === 'ok') { this.$message({ message: '导入成功', type: 'success' }) this.file = null this.$refs.upload.clearFiles() this.dialog = false }else { this.$message.warning(res.message) } }) }三、excel文件本地下载
如果我们将excel放入文件的public文件夹下该如何下载呢
其实就是模仿a标签实现下载
<el-button type="grey" size="small" v-hasPermi="['sheep:weight:info:temp']"> <a href="./template/weigh.xlsx" target="_blank" download="导入模板.xlsx">下载模板</a> </el-button>我们这样写,即可将public目录下的excel文件下载下来了
四、批量导出excel
我们使用批量导出是,会将所有的id组合成一个数组,然后传给后端
如果后端返回给我们的是乱码
这是我们需要在接口请求中添加responseType为blob
// 下載模板前端方法 SETexcel(url) { // 创建a标签 const elink = document.createElement('a'); // 创建Blob对象 const blob = new Blob([url], { type: 'application/octet-stream' }); const objectUrl = URL.createObjectURL(blob); // 模拟下载 elink.setAttribute('href',objectUrl); elink.setAttribute('download', "羊只导出" + '.xlsx') elink.click() document.body.removeChild(elink) }, // 全部导出 async allsheep() { const res = await setExcelsheep(this.searchForm); this.SETexcel(res) }
https://www.yuque.com/tademanong/ag7q4n/ml8yunl9dzxp6ydh?singleDoc# 《el-upload组件全家桶(坑位踩满)》语雀
如果此文章对大家有帮助,还望点下再看
声明：文中观点不代表本站立场。本文传送门：https://eyangzhen.com/193911.html
