el-upload+额外的参数 , element上传功能组件及其参数的详解

前言：

我们使用 element-ui 的时候，可能会有一个需求要给后台传入额外的值，我这边是遇到了，然后通过找到各种资料解决了，现在把我的upload的组件分享一下，可以实现导入，导出功能，导入的时候也会有额外的参数---这个是通过 ?gjlx= ,拼接在地址后面实现的；

效果图：，导入我需要所以放了出来，导出没有，具体可以看我的组件内容

好了，开始放代码吧：

这里主要针对的.xlsx和.xls两种文件格式 ,最后面有其他资料的入口，如果有感觉我这个不能满足需要，还想上次图片类型，其他类型的话，可以看看

首先是封装的导入导出 uploadfile.vue组件：

<template><div><div><el-button v-show="drShow" type="primary" @click="importData">导入</el-button><el-button v-show="dcShow" type="primary" @click="outportData">导出</el-button></div><!-- el-upload的参数详细解释：1、action 上传地址 - 后台给我们的地址2、headers 设置上传的请求头部，在后端那边解决跨域以后，这里是不用加的，但是如果有需要添加请求头，也是可以加的，我这里没有加，因为没用到3、data  类型：object(对象，需注意） 上传时携带的其他参数，这个我没使用，我用的是在请求头后面 + ？...的方式拼接的4、name 类型:string  默认为file，也可以改成我们需要的5、accept  类型:string 接收文件类型,多个以逗号隔开      例如：.xls,.xlsx6、http-request 自定义上传事件，会覆盖之前的，使用以后name也失效了7、on-success成功以后调用的函数8、limit限制一次传输的个数9、before-upload进行传输之前会进入的函数10、auto-Upload = 'false'//是否自动上次，默认是true--><!-- 导入 --><el-dialog title="导入" :visible.sync="dialogImportVisible" :modal-append-to-body="false" :close-on-click-modal="false" class="dialog-import"><div :class="{'import-content': importFlag === 1, 'hide-dialog': importFlag !== 1}"><el-upload class="upload-demo":action="importUrl":name ="name":limit="maxNum":headers="importHeaders":on-preview="handlePreview":on-remove="handleRemove":before-upload="beforeUpload":on-error="uploadFail":on-success="uploadSuccess":file-list="fileList":with-credentials="withCredentials"><!-- 是否支持发送cookie信息 --><el-button size="small" type="primary" :disabled="processing">{{uploadTip}}</el-button><div slot="tip" class="el-upload__tip">只能上传excel文件</div></el-upload><div class="download-template"><a class="btn-download" @click="download"><i class="icon-download"></i>下载模板</a></div></div><div :class="{'import-failure': importFlag === 2, 'hide-dialog': importFlag !== 2}" ><div class="failure-tips"><i class="el-icon-warning"></i>导入失败</div><div class="failure-reason"><h4>失败原因</h4><ul><li v-for="(error,index) in errorResults" :key="index">第{{error.rowIdx + 1}}行，错误：{{error.column}},{{error.value}},{{error.errorInfo}}</li></ul></div></div></el-dialog><!-- 导出 --></div></template><script>import axios from 'axios'//导出请求后台会用到export default {name:'upload_file',props:['drShow','dcShow','selChange'],//drShow,是否使用导入；dcShow,是否使用导出；selChange，这个是那个旁边下拉的数据，我这里因为业务需要，动态传入data () {return {importUrl:'http://192.168.0.123:9003/ZyAndLpImportController/importZyAndLp?wjlx=',//后台接口config.admin_url+'rest/schedule/import/'importHeaders:{enctype:'multipart/form-data',cityCode:'',},name: 'import',fileList: [],withCredentials: true,processing: false,uploadTip:'点击上传',importFlag:1,dialogImportVisible:false,errorResults:[],maxNum:1,//最大传一个，限制数量};},components: {},computed: {},beforeMount() {},mounted() {},methods: {importData() {this.importFlag = 1this.fileList = []this.uploadTip = '点击上传'this.processing = falsethis.dialogImportVisible = true},outportData() {this.downloadTemplate()},handlePreview(file) {//可以通过 file.response 拿到服务端返回数据},handleRemove(file, fileList) {//文件移除},beforeUpload(file){//上传前配置let url = this.importUrl+this.selChange;this.importUrl = url;this.importHeaders.cityCode=''//可以配置请求头let excelfileExtend = ".xls,.xlsx"//设置文件格式let fileExtend = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();if (excelfileExtend.indexOf(fileExtend) <= -1) {this.$message.error('文件格式错误')return false}this.uploadTip = '正在处理中...'this.processing = true},//上传错误uploadFail(err, file, fileList) {this.uploadTip = '点击上传'this.processing = falsethis.$message.error(err)},//上传成功uploadSuccess(response, file, fileList) {this.uploadTip = '点击上传'this.processing = falsedebuggerif (response.status === -1) {this.errorResults = response.dataif (this.errorResults) {this.importFlag = 2} else {this.dialogImportVisible = falsethis.$message.error(response.errorMsg)}} else {this.importFlag = 3this.dialogImportVisible = falsethis.$message.info('导入成功')this.doSearch()}},//下载模板download() {//调用后台模板方法,和导出类似this.downloadTemplate()},downloadTemplate(scheduleType) {axios.get('/rest/schedule/template', {//导出的地址params: {//导出的参数"scheduleType": scheduleType},responseType: 'arraybuffer'}).then((response) => {//创建一个blob对象,file的一种let blob = new Blob([response.data], { type: 'application/x-xls' })let link = document.createElement('a')link.href = window.URL.createObjectURL(blob)link.download = fileNames[scheduleType] + '_' + response.headers.datestr + '.xls'link.click()})}},watch: {}}</script>
<style lang='less' scoped>.hide-dialog{display:none;}
</style>

然后是调用页面了：

//js部分
import uploadfile from '@/components/common/uploadfile'//uploadfiledata() {return {jhxqDr:true,//是否需要导入jhxqDc:false,//是否需要导出}
}components: {uploadfile}

//template部分
<uploadfile style="float:right;margin-right:20px;" :drShow='jhxqDr' :dcShow='jhxqDc' :selChange='jhselChange'></uploadfile>

好了，我的组件就到这里了，如果觉得有用，转走不谢，如果有更好的方法，我也欢迎过来一起交流进步，底下是看更多相关资料的链接，有需要的朋友可以看看

https://cloud.tencent.com/developer/section/1489880 腾讯云的关于上传的链接

https://element.eleme.cn/#/zh-CN/component/upload#shou-dong-shang-chuan element官网关于上传的链接

el-upload+额外的参数 , element上传功能组件及其参数的详解相关推荐

plupload怎么设置属性_jquery上传插件：plupload事件参数说明详解
jquery上传插件:plupload事件参数说明详解 2018-12-01 本篇重点说明一下plupload的事件参数.并用2个例子说明一下绑定事件. 1.plupload参数说明: Browse_ ...
数据不平衡（class_weight、评估方法、上采样、下采样）、详解及实战
数据不平衡(class_weight.评估方法.上采样.下采样).详解及实战核心学习函数方法: np.random.choice() np.where() np.concatenate() np.v ...
linux rpm安装zabbix,CentOS 7上安装Zabbix Server 3.0 图文详解
CentOS 7上安装Zabbix Server 3.0 图文详解 1.查看系统信息. cat /etc/RedHat-release CentOS Linux release 7.0.1406 (C ...
linux上传文件命令ftp put,Linux ftp 命令行中下载文件get与上传文件put的命令应用详解...
介绍:从本地以用户anok登录的机器192.168.0.16上通过ftp远程登录到192.168.0.6的ftp服务器上,登录用户名是peo.以下为使用该连接做的实验. 查看远程ftp服务器上用户pe ...
linux get与put,科技常识：Linux ftp 命令行中下载文件get与上传文件put的命令应用详解...
今天小编跟大家讲解下有关Linux ftp 命令行中下载文件get与上传文件put的命令应用详解 ,相信小伙伴们对这个话题应该也很关注吧,小编也收集到了有关Linux ftp 命令行中下载文件get与 ...
linux 用root安装mysql数据库_Linux上安装Mysql及简单的使用详解
1. 安装mysql sudo apt-get update sudo apt-get install mysql-server sudo apt-get install python-mysqldb ...
windows上安装Anaconda和python的教程详解
一提到数字图像处理编程,可能大多数人就会想到matlab,但matlab也有自身的缺点: 1.不开源,价格贵 2.软件容量大.一般3G以上,高版本甚至达5G以上. 3.只能做研究,不易转化成软件. 因 ...
python安装教程windows-windows上安装Anaconda和python的教程详解
一提到数字图像处理编程,可能大多数人就会想到matlab,但matlab也有自身的缺点: 1.不开源,价格贵 2.软件容量大.一般3G以上,高版本甚至达5G以上. 3.只能做研究,不易转化成软件. 因 ...
怎么在手机上取消双重认证_用手机在淘宝上怎么开网店?流程步骤详解
这是一篇关于"用手机在淘宝上怎么开网店?流程步骤详解"的文章: 开网店因为门槛低.收益大,成为众多年轻人创业的首选.很多新手朋友们都想开一家属于自己的网店,但是苦于没有经验, ...
在anaconda安装python命令_windows上安装Anaconda和python的教程详解
一提到数字图像处理编程,可能大多数人就会想到matlab,但matlab也有自身的缺点: 1.不开源,价格贵 2.软件容量大.一般3G以上,高版本甚至达5G以上. 3.只能做研究,不易转化成软件. 因 ...

el-upload+额外的参数 , element上传功能组件及其参数的详解

el-upload+额外的参数 , element上传功能组件及其参数的详解相关推荐

最新文章

热门文章