【Vue】基于Element-UI的文件上传与下载

【项目背景】

最近要求做一个Excel表格上传下载的前端页面，第一次学Vue，Element-UI框架真的用起来很方便，封装了各种基础组件，很适合小白入门开发学习。

Element-UI： https://element.eleme.cn/#/zh-CN

最终效果如下，为降低用户上传错误数据的概率，先提供一个下载模板，然后再让用户上传。

【程序结构】

#1-> 文件下载

下载一般分两种情况，一种是去后台请求接口下载数据流的方式，这种情况适用于需要根据用户自定义需求请求数据库的情况，另一种是请求本地文件下载，比如我现在做的这种情况，只是需要给用户提供一个下载的模板文件，是预先定义好的，所以可以直接把文件就放在本地，前端直接请求文件地址下载即可。

预先定义好的模板文件 [template.xlsx] 放在public/template/下。

需要注意的是vue cli 3.0之后取消了原先的static文件夹，所有的静态资源文件可以放在public/下面。

<!-- 下载数据模板 -->
<div class="div-label"><label>上传文件之前请先下载<span style="font-weight: bold">数据模板</span></label></div>
<el-button @click="download" class="el-button-color add-button-box" size="medium" type="primary"><i class="el-icon-download el-icon--right"></i>下载数据模板
</el-button>

通过window.location.href直接请求本地文件地

methods: {// 下载本地文件download () {window.location.href = 'http://localhost:8080/template/template.xlsx'}

#2-> 文件上传

限制一次只能上传一个文件，限定只能上传.xlsx结尾的Excel文件，且文件大小不能超过10MB

选择手动触发上传，并通过:http-request自定义上传方式，让用户先选择一个文件，前端展示上传文件列表，可以选择删除，再让用户确认上传文件，注意这里其实有两个步骤，分别绑定了两个button。

<!-- 上传文件 -->
<div class="div-label"><label>上传文件，仅支持<span style="font-weight: bold">.xlsx</span>格式的Excel文件，且大小不超过<spanstyle="font-weight: bold;color: red">10MB</span></label></div>
<el-uploadclass="upload-demo"ref="upload"actionaccept=".xlsx":limit="1":file-list="fileList":auto-upload="false":on-exceed="handleExceed":on-preview="handlePreview":on-change="handleChange":on-remove="handleRemove":before-upload="beforeUpload":http-request="httpRequest":on-success="handleSuccess":on-error="handleError"><el-button slot="trigger" size="medium" type="primary">选取文件</el-button><el-button style="margin-left: 10px;" size="medium" type="success" @click="submitUpload">上传到服务器</el-button>
</el-upload>

文件上传的基础响应事件，具体可参考官方文档

      // 超过文件上传最大个数handleExceed (files, fileList) {this.$message.warning('很抱歉当前支持最大上传文件个数为 1 个！')},// 文件上传到服务器之前的文件校验beforeUpload (file) {const extension = file.name.substring(file.name.lastIndexOf('.') + 1)const size = file.size / 1024 / 1024if (extension !== 'xlsx') { // 校验文件格式this.$message.warning('只支持上传后缀名为.xlsx的Excel文件')}if (size > 10) { // 校验文件大小this.$message.warning('文件大小不能超过10MB')}},// 文件状态改变handleChange (file, fileList) {if (file) {this.fileList = fileList.slice(-3)}},// 文件删除时handleRemove (file, fileList) {console.log(file, fileList)this.fileList = [] // 文件列表置空},// 点击文件列表中已上传的文件时的钩子handlePreview (file) {console.log(file)},// 文件上传成功handleSuccess (response, file, fileList) {console.log('-------handleSuccess-------')console.log(response)this.$message.success('文件 [' + file.name + '] 上传成功')},// 文件上传失败handleError (err, file, fileList) {console.log('-------handleError-------')console.log(err)this.$message.error('文件上传失败')}

http-request 自定义上传实现，需要注意的是上传的文件需要封装在FormData里，并添加一个headers设置'multipart.form-data'，

this.$http.post(url, data, config) 这里的$http就是axios

      // 覆盖默认的上传行为，可以自定义上传的实现httpRequest (param) {console.log(param)const fileObj = param.file // 获取file文件const formData = new FormData() // FormData对象formData.append('file', fileObj) // file封装到FormData里// 请求后台上传数据的接口this.$http.post('/upload', formData, {headers: { 'Content-Type': 'multipart/form-data' }// url: '/upload',// data: formData// method: 'post'}).then(res => {console.log('-------res--------')console.log(res)if (res.data.meta.status === '200') {this.$message.success(res.data.meta.msg)// 清空文件列表this.fileList = []} else {this.$message.error(res.data.meta.msg)}}, err => {console.log('-------err--------')console.log(err)this.$message.error('上传文件内容有问题，请保证上传文件字段均不为空且正确')})}

手动上传

    submitUpload () {if (this.fileList.length === 0) { // 上传文件列表为空this.$message.warning('请选择一个上传文件')} else { // 执行上传操作this.$refs.upload.submit()}}

【完整代码】

<template><div> <el-card><!-- 下载数据模板 --><div class="div-label"><label>上传文件之前请先下载<span style="font-weight: bold">数据模板</span></label></div><el-button @click="download" class="el-button-color add-button-box" size="medium" type="primary"><i class="el-icon-download el-icon--right"></i>下载数据模板</el-button><!-- 上传文件 --><div class="div-label"><label>上传文件，仅支持<span style="font-weight: bold">.xlsx</span>格式的Excel文件，且大小不超过<spanstyle="font-weight: bold;color: red">10MB</span></label></div><el-uploadclass="upload-demo"ref="upload"actionaccept=".xlsx":limit="1":file-list="fileList":auto-upload="false":on-exceed="handleExceed":on-preview="handlePreview":on-change="handleChange":on-remove="handleRemove":before-upload="beforeUpload":http-request="httpRequest":on-success="handleSuccess":on-error="handleError"><el-button slot="trigger" size="medium" type="primary">选取文件</el-button><el-button style="margin-left: 10px;" size="medium" type="success" @click="submitUpload">上传到服务器</el-button></el-upload></el-card></div>
</template><script>export default {name: 'Upload',data () {return {fileList: []}},methods: {// 下载本地文件download () {window.location.href = 'http://localhost:8080/template/template.xlsx'},// 超过文件上传最大个数handleExceed (files, fileList) {this.$message.warning('很抱歉当前支持最大上传文件个数为 1 个！')},// 文件上传到服务器之前的文件校验beforeUpload (file) {const extension = file.name.substring(file.name.lastIndexOf('.') + 1)const size = file.size / 1024 / 1024if (extension !== 'xlsx') { // 校验文件格式this.$message.warning('只支持上传后缀名为.xlsx的Excel文件')}if (size > 10) { // 校验文件大小this.$message.warning('文件大小不能超过10MB')}},// 文件状态改变handleChange (file, fileList) {if (file) {this.fileList = fileList.slice(-3)}},// 文件删除时handleRemove (file, fileList) {console.log(file, fileList)this.fileList = [] // 文件列表置空},// 点击文件列表中已上传的文件时的钩子handlePreview (file) {console.log(file)},// 文件上传成功handleSuccess (response, file, fileList) {console.log('-------handleSuccess-------')console.log(response)this.$message.success('文件 [' + file.name + '] 上传成功')},// 文件上传失败handleError (err, file, fileList) {console.log('-------handleError-------')console.log(err)this.$message.error('文件上传失败')},// 覆盖默认的上传行为，可以自定义上传的实现httpRequest (param) {console.log(param)const fileObj = param.file // 获取file文件const formData = new FormData() // FormData对象formData.append('file', fileObj) // file封装到FormData里// 请求后台上传数据的接口this.$http.post('/upload', formData, {headers: { 'Content-Type': 'multipart/form-data' }// url: '/upload',// data: formData// method: 'post'}).then(res => {console.log('-------res--------')console.log(res)if (res.data.meta.status === '200') {this.$message.success(res.data.meta.msg)// 清空文件列表this.fileList = []} else {this.$message.error(res.data.meta.msg)}}, err => {console.log('-------err--------')console.log(err)this.$message.error('上传文件内容有问题，请保证上传文件字段均不为空且正确')})},// 上传文件submitUpload () {if (this.fileList.length === 0) { // 上传文件列表为空this.$message.warning('请选择一个上传文件')} else { // 执行上传操作this.$refs.upload.submit()}}}}
</script><style scoped>.div-label {padding: 20px 0;width: 100%;}
</style>

参考：

https://www.jianshu.com/p/ea2b8ef30ffc

https://www.cnblogs.com/pinkpinkc/p/13221705.html

https://www.cnblogs.com/carriezhao/p/12707058.html

【Vue】基于Element-UI的文件上传与下载相关推荐

Mr.张小白（案例：基于Spring MVC实现文件上传和下载）
基于Spring MVC实现文件上传和下载一.步骤 1.引入相关依赖pom.xml <?xml version="1.0" encoding="UTF-8&quo ...
基于FTP协议实现文件上传与下载
目录一.FTP简介二.关于FTP服务器三.文件上传分步讲解: 完整实现代码: 四.下载文件分步讲解: 完整实现代码: 小结一.FTP简介 FTP(File Transfer Protoco ...
基于tornado服务器的文件上传和下载
文章目录文件上传的服务端技术解析基于Ajax技术实现的文件上传客户端方法1:使用 ajaxfileupload.js 方法2:仅依赖 jquery.js 文件下载的服务端技术解析文件上传的服务 ...
基于TCP协议的文件上传与下载
一.前言 TCP协议:传输控制协议(TCP,Transmission Control Protocol)是一种面向连接的.可靠的.基于字节流的传输层通信协议,由IETF的RFC 793 定义.传输控制 ...
vue基于element时间日期组件上传多个时间转字符串（限制今天以前不能选）
html <el-form-item label="最晚到货时间" prop="project_time2" size="small" ...
java spring文件下载_SpringMVC实现文件上传和下载的工具类
本文主要目的是记录自己基于SpringMVC实现的文件上传和下载的工具类的编写,代码经过测试可以直接运行在以后的项目中. 开发的主要思路是对上传和下载文件进行抽象,把上传和下载的核心功能抽取出来分装成 ...
[RFC1867] HTML中基于表单的文件上传
网络工作组:E. Nebel 征求意见:1867 L. Masinter 类别:试验施乐公司十一月 1995 HTML中基于表单的文件上传这个备忘录的状态这个备忘录为互联网社区定义了一个试验协 ...
Struts2.3.5+Hibernate3+Spring3.1基于注解实现的多文件上传，下载
Struts2.3.5+Hibernate3+Spring3.1基于注解实现的的多文件上传,下载,这里是上传文件到数据库中,上传控件可以增加和删除,有需要的朋友可以看看. 以下是源码下载地址:http ...
linux的常用操作——基于ftp的windows10和腾讯云centos操作系统之间的文件上传和下载
\qquad在腾讯云服务器的centos操作系统上,安装vsftpd并进行配置,然后基于ftp实现windows10操作系统和腾讯云centos系统之间的文件上传和下载. 文章目录 1.基于腾讯云服务 ...
SSM框架基于Bootstrap fileinput 实现文件上传功能
SSM框架基于Bootstrap fileinput 实现文件上传功能 pom.xml文件的配置想要实现SSM框架实现多文件上传,必要的jar包必须要在pom.xml文件中引入.如下: <! ...

【Vue】基于Element-UI的文件上传与下载

【Vue】基于Element-UI的文件上传与下载相关推荐

最新文章

热门文章