element组件

关键字： Upload 上传、element.ui、form

• upload手动触发上传

<el-upload ref="upload" :action="uploadUrl"
  :auto-upload="false" :data="extraData"
  accept=".xlsx,.xls,.pdf,.doc,.docx,.png,.jpg,.jpeg" 
  :onChange="handleChange"
  :on-success="handleSuccess"
  :on-error="handleError"
  :file-list="localFileList">
</el-upload>

参数解析

参数	说明	类型	可选值	默认值
action	必选参数，上传的地址	string	—	—
data	上传时附带的额外参数	object	—	—
auto-upload	是否在选取文件后立即进行上传	boolean	—	true
on-success	文件上传成功时的钩子(访问后端上传接口后会进入该回调)	function(response, file, fileList)	—	—
on-error	文件上传失败时的钩子(后管接口404会进该回调)	function(err, file, fileList)	—	—
on-change	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用	function(file, fileList)	—	—

首先，设置auto-upload为false，本地上传文件后，不会主动触发后端接口，需进行手动触发。
可设置上传的额外参数data, 通过组件的submit方法触发上传。

handleChange (file, localFileList) {
    this.extraData = {
       a: 'xx'
    }
    setTimeout(() => {
       this.$refs.upload.submit()
    })
 }

附件本地上传后，只要触发了端接口后，无论是否成功都无法进行再次提交。可以把文件状态改为ready，则可以继续提交

    handleSuccess(res, file, fileList) {
      if (res && res.code === '000') {
        //
      } else {
          this.fileList[0].status = 'ready'
    }

本地上传文件后，会维护一个文件缓存列表localFileList，如果需要清除缓存可以调用clearFiles方法

    handleError(error) {
      this.$refs.upload.clearFiles()
    }

• 官方文档
  upload组件

form表单enter键导致页面刷新

@submit.native.prevent="eventHandler"