zoukankan      html  css  js  c++  java
  • element-ui 文件上传

    <el-form-item>
              <el-upload
                ref="upload"
                class="upload-demo"
                :action="daoruUrls"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileArr"
                :on-success="handleSuccess"
                :before-upload="beforeUploadFile"
                :auto-upload="false"
                :data="daoru"
                :limit="1"
                :on-exceed="onexceed"
              >
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button
                  style="margin-left: 10px;"
                  size="small"
                  type="success"
                  @click="daorusubmitForm('daoruForm')"
                >导入</el-button>
                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> -->
              </el-upload>
            </el-form-item>
    // 导入确认
        daorusubmitForm(form) {
          console.log('111', this.fileArr)
          // console.log("form", form, this.$refs[form]);
          this.$refs[form].validate(valid => {
            this.$refs.upload.submit()
          })
        },
        // 导入关闭
        daorucloseDialog() {
          this.daorudialogFormVisible = false
        },
        // 导入之前
        beforeUploadFile(file) {
          console.log('上传之前', file)
          console.log('daoru', this.daoru)
          const isLt10M = file.size / 1024 / 1024 < 10
          const isText = file.type === 'application/vnd.ms-excel'
          const isTextComputer =
            file.type ===
            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
          if (!isLt10M) {
            this.$message.error('上传文件大小不能超过10MB!')
            return false
          }
          if (!isText && !isTextComputer) {
            this.$message.error('上传文件类型必须为excel!')
            return false
          }
        },
        // 导入成功
        handleSuccess: function(res, file, fileList) {
          console.log('成功', res, file, fileList)
          const _this = this
          console.log(res)
          if (res.success === true) {
            _this.$alert('上传成功', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                this.currentPage = 1
                this._reportList()
                this.daorudialogFormVisible = false
              }
            })
          } else {
            _this.$alert('上传失败,请稍后再试', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                this.daorudialogFormVisible = false
                this.fileArr = []
              }
            })
          }
        },
        // 删除文件
        handleRemove(file, fileList) {
          console.log('file删除', file, fileList)
        },
        // 选中文件
        handlePreview(file) {
          // this.fileArr = file;
          console.log('file选中', file)
        },
        // 文件限制
        onexceed(files, fileList) {
          this.$message({
            message: '最多只能上传一个文件',
            type: 'error'
          })
          console.log('files, fileList', files, fileList)
        }
  • 相关阅读:
    一个996程序员的自述:在公司眼里你就是一个工具
    我国为何如此重视编程教育?少儿编程会纳入基础教学吗?
    自学 Python 到什么程度能找到工作,1300+ 条招聘信息告诉你答案
    Book
    BFS
    Word写论文公式输入
    matlab保存超分辨率图
    [转载]有价值的Paper
    Latex作图
    微软企业库5.0学习笔记(七)存储容器的引用
  • 原文地址:https://www.cnblogs.com/Byme/p/11357615.html
Copyright © 2011-2022 走看看