el-upload通过自定义按钮才能上传(不自动上传)

        公司需求是,用户上传文件,可以显示上传成功没,但是没有上传到后台,需要通过自己手动添加一个按钮,只有点击这个按钮后才能把文件传给后端

<el-upload
              class="upload-demo"
              drag
              action=""//接口地址
              :limit="1"
              :before-upload="beforeupload"
              :on-success="uploadTemplatesuccess"
              :headers="dataform"
              :data="iotDevice"
              :disabled="diag"
              :auto-upload="false"
              :on-change="handleChange"
              ref='upload'
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text" @click="uploadtext">
                将文件拖到此处,或<em>点击上传</em>
              </div>
            </el-upload>
            <div class="mt10px">
              <el-link type="primary" @click="uploadFile">下载模板</el-link>
              <!-- <el-link type="primary"><a href="/tempalte.xlsx">下载模板</a></el-link> -->
            </div>



   <el-button type="primary" size="mini" @click="fileUp()"
          >提交文件</el-button
        >

点击上传文件后提交到后台

   //文件上传成功提示

  uploadTemplatesuccess(res, file) {
      console.log(res, file, '文件上传成功')
      if (res.status == 0) {
        this.$message({
          type: 'success',
          message: res.msg
        })
      } else {
        this.$message.error(res.msg)
      }
    },
 uploadtext() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.diag = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    fileUp() {
      if (this.filetemp.length > 0) {
        this.$refs.upload.submit()//重点
      } else {
        this.$message({
          type: 'info',
          message: '请先上传附件!'
        })
      }
    },
    handleChange(file, filelist) {
      console.log(file, filelist, '改变事件-------')
      if (file.status === 'ready') {
        if (filelist.length > 1) {
          filelist.splice(0, 1)
        }
        this.filetemp = filelist
      } 
    }

这样就完成了自定义上传文件了

下载模板是通过el-link之后绑定个点击事件,再通过window.open打开一个模板地址下载,文章到此结束希望对你有所帮助

猜你喜欢

转载自blog.csdn.net/qq_44278289/article/details/128393122