• Ajax
  • Ant design
  • Axios-Fetch
  • Avue
  • Browser
  • Canvas
  • CSS
  • Dos-bat
  • Dva
  • Dedecms
  • Echart
  • ElementUI
  • Editors
  • Git
  • GeoServer
  • GIS
  • H5
  • Jquery
  • Java安卓
  • Json
  • Javascript
  • Leaflet
  • Linux
  • Life-Info
  • Mock
  • MongoDB
  • Network
  • NodeJS
  • NPM
  • React
  • 设计运营
  • SEO
  • SVG
  • TypeScript
  • Tools
  • umi
  • uni-APP
  • Vant
  • Vue
  • Windows
  • webpack
  • 位置:OC中文网 > 其他 > ElementUI >

    el-upload自定义上传参数

    来源:openlayers-cesium.com 时间:07-27

    el-upload上传文件的时候可以自带参数,可以带token等信息。

    HTML

    1. <el-upload 
    2.   class="upload-demo" 
    3.   action="https://www.baidu.com"  // url 
    4.   :headers="headers"              // 请求头,一般填token、orgid等身份校验信息 
    5.   :with-credentials="true"        // 自动获取cookie 
    6.   :data="uploadDataReq"           // url中带的参数 
    7.   :before-upload="checkFileExist" // 上传文件之前触发的事件,一般为调另一个接口检查文件是否存在 
    8.   :on-success="uploadSuccess"      // 上传成功触发的事件,一般为弹窗提示上传成功 
    9.   :on-remove="removeTechnicalDoc" // 删除文件,可以调删除文件的接口 
    10.   :on-change="handleChange"       // 组件中文件变化事件,可以拿到已经上传的文件列表自定义显示样式 
    11.   :file-list="fileList">          // 文件列表数组 
    12.   <el-button size="small" type="primary">点击上传</el-button> 
    13. </el-upload> 

    JS

    1. async checkFileExist (file, fileList) {   // 此处一定要用async await把异步请求转为同步,否则文件查重接口还未返回,文件就已经上传了 
    2.       // console.log(file, fileList) 
    3.       let name = file.name 
    4.       // let arr = name.split('.') 
    5.       let type = this.type 
    6.       // 上传文件入参 
    7.       this.uploadDataReq.type = type 
    8.       // 检查文件是否存在入参 
    9.       this.checkExistDataReq[0].type = type 
    10.       this.checkExistDataReq[0].fileName = name 
    11.       await checkFileExist(this.checkExistDataReq).then((response) => { 
    12.         if (response[0].exist) { 
    13.           let result = confirm('该文件已存在,是否覆盖?') // 此处必须用confirm,因为它有回调 
    14.           console.log(result) 
    15.           if (result) { 
    16.                 // 如果用户选择覆盖文件,组件会自动上传文件 
    17.           } else { 
    18.             throw new Error('1')  // 此处必须抛出一个错误,只有throw error可以终止上传文件 
    19.           } 
    20.         } 
    21.       }) 
    22.     },