elementUI+el-upload 上传、下载、删除文件以及文件展示列表自定义为表格展示

Upload 上传组件的使用
  • 官方文档链接
  • 使用el-upload组件上传文件
    • 具体参数说明,如何实现上传、下载、删除等功能
    • 获取文件列表进行file-list格式匹配
    • 代码
  • 文件展示列表自定义为表格展示
    • 使用的具体参数说明
    • 文件大小展示问题(KB/MB)
    • 文件下载
    • 代码
  • 上传文件大小与文件类型校验

官方文档链接

官方文档 https://element.eleme.cn/#/zh-CN/component/upload

使用el-upload组件上传文件

在这里插入图片描述

具体参数说明,如何实现上传、下载、删除等功能

  • action:文件上传地址,我的项目里已经封装好了请求。使用的时候需要依据项目填写。

  • show-file-list: 是否显示已上传文件列表。

  • headers:设置上传的请求头部。我的项目需要传token。

  • on-preview:点击文件列表中已上传的文件时的钩子。
    可以在这个这个回调方法里写下载功能部分代码,实现点击文件下载功能。

  • on-remove:文件列表移除文件时的钩子。
    在文件列表回显时,使用数组fileData记录id列,执行删除回调时,匹配id,因为删除回调方法返回的file中不记录id,只记录url,可通过url相同返回id,再调用删除接口。

  • on-successfunction(response, file, fileList) 文件上传成功时的钩子。
    如果不设置auto-upload:false ,则选取文件后立即进行上传,成功回调后使用返回的参数调用接口,完成文件上传。

获取文件列表进行file-list格式匹配

  • file-list :上传的文件列表, 例如: [{name: ‘food.jpg’, url: ‘https://xxx.cdn.com/xxx.jpg’}]
  • 列表回显时,需要将返回列表对应参数赋值给file-list对应的数组fileData 。

代码

<template><basic-container><el-form :model="dataForm" ref="dataForm" label-width="140px"><el-form-item><el-upload class="upload-demo" ref="upload" :headers="headers" action="/admin/sys-file/upload":on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleAvatarSuccess" :file-list="fileData"><el-button slot="trigger" size="small" type="primary">上传文件</el-button></el-upload></el-form-item></el-form></basic-container>
</template>

<script>
import {
getObj,
addObj,
putObj,
fetchList,
getnoticeId,
delObj
} from ‘@/api/policy/noticeattachment’
import store from ‘@/store’
import { mapState} from ‘vuex’
export default {
data() {
return {
dataForm: {
id: 0,
noticeId: ‘’,
attachName: ‘’,
attachUrl: ‘’,
},
dataList: [],
fileData: [],
headers: {
‘Authorization’: 'Bearer ' + store.getters.access_token,
},
}
},
methods: {
init(id) {
// console.log(id)
this.dataForm.noticeId = id
//数组每次需要清空
this.fileData.splice(0, this.fileData.length);
this.KaTeX parse error: Expected 'EOF', got '&' at position 167: …ken operator">=&̲gt;</span> <spa…refs[‘dataForm’].resetFields();
if (this.dataForm.noticeId) {
getnoticeId(this.dataForm.noticeId).then(response => {
this.dataList = response.data.data;
this.dataList.forEach(list => {
this.fileData.push({
name: list.attachName,
url: list.attachUrl,
id: list.id //删除时使用
})
})
});
}
});
},
//移除回调
handleRemove(file, fileList) {
let resultArr = this.fileData.filter((item) => {
return item.url === file.url
});
// console.log(resultArr[0])
this.dataForm.id = resultArr[0].id
this.KaTeX parse error: Expected 'EOF', got '&' at position 167: …ken operator">=&̲gt;</span> <spa…message.success(‘删除成功’)
})
},
// 表单提交
dataFormSubmit() {
this.KaTeX parse error: Expected 'EOF', got '&' at position 369: …ken operator">=&̲gt;</span> <spa…message.success(‘修改成功’)
});
} else {
addObj(this.dataForm).then(data => {
this.$message.success(‘添加成功’)
})
}
}
})
}
}
}
</script>

文件展示列表自定义为表格展示

在这里插入图片描述

使用的具体参数说明

  • show-file-list: 是否显示已上传文件列表。
    展示自定义表格样式需要设置show-file-list=“false”
  • on-successfunction(response, file, fileList) 文件上传成功时的钩子。
    如果不设置auto-upload:false ,则选取文件后立即进行上传,成功回调后使用返回的参数调用接口,完成文件上传。

文件大小展示问题(KB/MB)

  • 上传文件时size默认传file返回的size大小(默认为1字节),在表格展示时进行判断,如果大于1MB展示单位为MB,小于1MB展示单位KB。
  • MB:size / 1024 / 1024
  • KB:size / 1024
    (既然提到字节,可能有的人不熟悉字节,这里顺便记录一下字节转换关系)
    字节也叫Byte,是计算机数据的基本存储单位。
    8bit(位)=1Byte(字节)
    1024Byte(字节)=1KB
    1024KB=1MB
    1024MB=1GB
    1024GB=1TB
    其中:K是千 M是兆 G是吉咖 T是太拉。

文件下载

  • 点击下载按钮,实现下载此文件。使用a标签,传入对应文件name和url。具体代码下面记录。

代码

<template><basic-container><el-upload class="upload-demo"ref="upload":headers="headers"action="/admin/sys-file/upload":on-success="handleAvatarSuccess":show-file-list="false"><el-button slot="trigger" size="small" type="primary">上传文件</el-button></el-upload><el-table class="down" :data="dataList" border stripe style="width: 100%;margin-top: 20px;"><el-table-column prop="attachName" label="文件名称"></el-table-column><el-table-column prop="attachSize" label="文件大小"><template slot-scope="scope"><span v-if="scope.row.attachSize / 1024 / 1024 < 1">{{(scope.row.attachSize / 1024).toFixed(2) + 'KB'}}</span><span v-else>{{(scope.row.attachSize / 1024 / 1024).toFixed(2) + 'MB'}}</span></template></el-table-column><el-table-column prop="createTime" label="上传时间"></el-table-column><el-table-column width="150px" label="操作"><template slot-scope="scope"><el-button size="small" type="text"><a @click="downloadFile(scope.row.attachName,scope.row.attachUrl)">下载</a></el-button><el-button size="small" type="text" @click="deleteHandle(scope.row.id)">删除</el-button></template></el-table-column></el-table></el-form></basic-container>
</template>

<script>
import {
getObj,
addObj,
putObj,
fetchList,
getnoticeId,
delObj
} from ‘@/api/policy/noticeattachment’
import store from ‘@/store’
import { mapState} from ‘vuex’
export default {
data() {
return {
dataForm: {
id: 0,
noticeId: ‘’,
attachName: ‘’,
attachUrl: ‘’,
attachSize: ‘’,
},
dataList: [],
headers: {
‘Authorization’: 'Bearer ' + store.getters.access_token,
},
}
},
methods: {
init(id) {
this.dataForm.noticeId = id
this.KaTeX parse error: Expected 'EOF', got '&' at position 167: …ken operator">=&̲gt;</span> <spa…confirm(‘是否确认删除该附件’, ‘提示’, {
confirmButtonText: ‘确定’,
cancelButtonText: ‘取消’,
type: ‘warning’
}).then(function () {
return delObj(id)
}).then(data => {
this.KaTeX parse error: Expected 'EOF', got '}' at position 469: …n punctuation">}̲</span><span cl…message.success(‘添加成功’)
this.getDataList()
})
}
}
}
</script>
<style lang=“scss” scoped=“scoped”>
.down >>> a {
color: #409EFF;
}
</style>

上传文件大小与文件类型校验

  1. 可以在beforeUpload方法中进行过滤。
  2. 使用accept参数

我自己的项目里暂时没有限制,后续有需求的话会进行更新。这里不做过多概述。
下面po官网代码:

<el-uploadclass="avatar-uploader"action="https://jsonplaceholder.typicode.com/posts/":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload"><img v-if="imageUrl" :src="imageUrl" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

<script>
export default {
data() {
return {
imageUrl: ‘’
};
},
methods: {
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isJPG = file.type === ‘image/jpeg’;
const isLt2M = file.size / 1024 / 1024 < 2;

    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>isJPG<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span><span class="token keyword">this</span><span class="token punctuation">.</span>$message<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'上传头像图片只能是 JPG 格式!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>isLt2M<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span><span class="token keyword">this</span><span class="token punctuation">.</span>$message<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'上传头像图片大小不能超过 2MB!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token keyword">return</span> isJPG <span class="token operator">&amp;&amp;</span> isLt2M<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>

}
</script>

差不多使用到的就这些啦,如果有新需求会继续记录。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/635574.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【GitHub项目推荐--微软开源的可视化工具】【转载】

说到数据可视化&#xff0c;大家都很熟悉了&#xff0c;设计师、数据分析师、数据科学家等&#xff0c;都需要用各种方式各种途径做着数据可视化的工作.....当然许多程序员在工作中有时也需要用到一些数据可视化工具&#xff0c;如果工具用得好&#xff0c;就可以把原本枯燥凌乱…

【算法题】63. 不同路径 II

题目 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish”&#xff09;。 现在考虑网格中有障碍物。那么从左上角到…

svg矢量图标在wpf中的使用

在wpf应用程序开发中&#xff0c;为支持图标的矢量缩放&#xff0c;及在不同分辨率下界面中图标元素的矢量无损缩放&#xff0c;所以常常用到svg图标&#xff0c;那么如果完 美的将svg图标运用到wpf日常的项目开发中呢&#xff0c;这里分享一下我的个人使用经验和详细步骤。 步…

58 C++ 解决future只能取得一次结果的问题。--shared_future解决方案。

一 前提&#xff1a;future.get()方法只能获得一次 前面我们学习了使用async 启动异步任务&#xff0c;返回值使用 future<T> 获取的方案。 前面我们也学习了使用 promise<T> pro, 然后通过 pro.setvalue(tempvalue),最后通过 pro.getfuture()得到future。 然后…

二叉树的基础概念及遍历

二叉树(Binary Tree)的基础 1、树的概念 1、树的概念 树是一种非线性的数据结构&#xff0c;是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合&#xff0c;将它称为树&#xff0c;是因为在形状上像一颗倒着的树&#xff0c;如下图所示就是一颗二叉…

ROS2中python定时器的使用示例

创建定时器 self.timer self.create_timer(1.0, self.callback)函数定义 def create_timer(self,timer_period_sec: float,callback: Callable,callback_group: CallbackGroup None,clock: Clock None,) -> Timer:timer_period_sec: 定时执行时间间隔(s) callback: 回调…

electron-vite中的ipc通信

1. 概述 再electron中&#xff0c;进程间的通信通过ipcMain和ipcRenderer模块&#xff0c;这些通道是任意和双向的 1.1. 什么是上下文隔离进程 ipc通道是通过预加载脚本绑定到window对象的electron对象属性上的 2. 通信方式 2.1. ipcMain&#xff08;也就是渲染进程向主进…

R303 指纹识别模块硬件接口说明

1.外部接口尺寸图 2.USB通讯 3.串行通讯

修改大型二进制库内部函数名的bash 脚本及其解释

1.大型lib库重命名函数名字 迭代的方式对于大型二进制库改名字的功能脚本 会将源文件中的函数 add_(...) 修改成 nubia_add_(...) 的方式来调用 此脚本分配来修改&#xff0c;可以避免突破资源限制 ulimit -a&#xff1b; 保存为&#xff1a;redef_func_name_01.sh chmod…

VUE组件--动态组件、组件保持存活、异步组件

动态组件 有些场景可能会需要在多个组件之间进行来回切换&#xff0c;在vue中则使用<component :is"..."> 来实现组件间的来回切换 // App.vue <template><component :is"tabComponent"></component><button click"change…

第4周:Pytorch——综合应用和实战项目 Day 28-30: 学习资源和社区参与

第4周&#xff1a;综合应用和实战项目 Day 28-30: 学习资源和社区参与 在这个阶段&#xff0c;我们将探索更多的学习资源并鼓励参与PyTorch和TensorFlow的社区&#xff0c;以进一步提升技术和融入开发者社群。 学习资源&#xff1a; 论文&#xff1a;阅读最新的机器学习和深度…

【实战教程】ThinkPHP6分页功能轻松实现,让你的网站更高效!

ThinkPHP是一款非常流行的PHP开发框架&#xff0c;其最新版本ThinkPHP6在性能和易用性方面都得到了很大的改善。分页功能是网页开发中非常常见的功能&#xff0c;而ThinkPHP6也提供了非常方便的分页方法。本文将介绍如何实现ThinkPHP6的分页功能。 一、了解分页功能 在Web应用…

Spring FactoryBean

FactoryBean 是 Spring 框架中的一个高级接口&#xff0c;用于声明一个 Spring bean&#xff0c;它本身作为一个工厂可以创建其他的对象。这个机制常用于框架集成&#xff0c;例如用来创建复杂的第三方库实例&#xff0c;或者创建需要大量配置的对象。 实现 FactoryBean 接口的…

【JavaEE进阶】 SpringBoot配置⽂件

文章目录 &#x1f340;配置⽂件的作⽤&#x1f334;SpringBoot配置⽂件&#x1f38b;配置⽂件的格式&#x1f384;properties配置⽂件&#x1f6a9;properties基本语法&#x1f6a9;读取配置⽂件&#x1f6a9;properties的缺点 &#x1f333;yml配置⽂件yml基本语法&#x1f6…

TestCaseAssiant使用说明

目录 说明 工具界面 功能描述 Xmind转测试用例 测试组件 测试用例 用例优先级 用例前提 用例操作步骤 用例期望结果 Excel测试用例转Testlink xml 用例模板 使用技巧: TestLink Xml转Excel测试用例 说明 本文为小编之前博文中介绍的工具使用说明 Xmind转Excel测…

【亲测解决】Timedelta is not defined

问题 今天编写Python代码&#xff0c;出现问题如下&#xff1a; Timedelta is not defined解决方案 from datetime import timedelta1、参考&#xff0c; https://stackoverflow.com/questions/16782682/timedelta-is-not-defined

uniapp 小程序 使用 new FormData 报错,is not defined 问题解决(没解决)

new FormData 只适用于web端&#xff0c;uniapp 小程序不适用&#xff0c;这里当时也卡了一下&#xff0c;随便用个js文件发现其实FormData也使用不了&#xff0c;所以如果要配置formData 的格式 无法使用FormData,会报 FormData is not defined. 解决 原文 原文 原文 1.安装…

python tkinter 最简洁的计算器按钮排列

代码如下&#xff0c;只要再加上按键绑定事件函数&#xff0c;计算器既可使用了。 import tkinter as tk from tkinter.ttk import Separator,Buttonif __name__ __main__:Buttons [[%,CE,C,←],[1/x,x,√x,],[7, 8, 9, x],[4, 5, 6, -],[1, 2, 3, ],[, 0, ., ]]root tk.T…

MySQL作业 (4) 数据表综合练习

数据表综合练习 题目&#xff1a;1.查询" 01 "课程比" 02 "课程成绩高的学生的信息及课程分数1.1查询同时存在" 01 "课程和" 02 "课程的情况1.2查询存在" 01 "课程但可能不存在" 02 "课程的情况(不存在时显示为 n…

2024年阿里云优惠券和代金券领取,活动整理服务器价格表

2024阿里云优惠活动&#xff0c;免费领取阿里云优惠代金券&#xff0c;阿里云优惠活动大全和云服务器优惠价格表&#xff0c;阿里云ECS服务器优惠价99元一年起&#xff0c;轻量服务器优惠价61元一年&#xff0c;阿里云服务器网aliyunfuwuqi.com分享阿里云优惠券免费领取、优惠活…