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,.xlsx
		6、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 = 1
        this.fileList = []
        this.uploadTip = '点击上传'
        this.processing = false
        this.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 = false
        this.$message.error(err)
       },
       //上传成功
       uploadSuccess(response, file, fileList) {
        this.uploadTip = '点击上传'
        this.processing = false
      debugger
        if (response.status === -1) {
          this.errorResults = response.data
          if (this.errorResults) {
           this.importFlag = 2
          } else {
           this.dialogImportVisible = false
           this.$message.error(response.errorMsg)
          }
        } else {
          this.importFlag = 3
          this.dialogImportVisible = false
          this.$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'//uploadfile

 data() {
      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官网关于上传的链接