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)
        }
  • 相关阅读:
    解决成本的错误和问题
    DQM Serial Sync Index Program ERROR
    客户信用控制请求
    现有量,在途量,可用量,可保留量
    作为一位Vue工程师,这些开发技巧你都会吗?
    vue父子组件状态同步的最佳方式续章(v-model篇)
    vue-grid-layout拖拽布局实现空位添加新元素
    小程序保存图片到本地
    为 React 开发人员推荐 8 个测试工具、库和框架
    Deno会在短期内取代Node吗?
  • 原文地址:https://www.cnblogs.com/Byme/p/11357615.html
Copyright © 2011-2022 走看看