element ui vue 上传附件 封装

这里详细说一下el-upload属性

• name 主要用来保存文件字段，我下面的字段name = file
• data 用来传其他参数 下面我用定义 paramsFile
• auto-upload 自动上传，意思是选择完文件就自动帮你提交，我这边选择false
• 自定义提交方法(this.$refs.upload as ElUpload).submit();
• 详情参数官网查看

<template>
  <el-dialog
    class="m-inspection-report-upload modules"
    title="上传附件"
    :visible.sync="visibles"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    width="50%"
    append-to-body
  >
    <div>
      <el-upload
        name="file"
        class="upload-demo"
        :on-success="handleSuccess"
        ref="upload"
        :action="uploadUrl"
        :auto-upload="false"
        :before-upload="handleBeforUpload"
        :on-error="handleFail"
        :data="paramsFile"
        list-type="picture"
        accept="image/png, image/jpeg"
      >
        <el-button size="small" type="primary">选取文件</el-button>
        <div slot="tip" class="m-tip">
          <el-form :model="data" ref="form">
            <el-form-item
              prop="effectiveDate"
              label="截止有效日期时间："
              :rules="[{ required: true, message: $t('hint.pInput'), trigger: 'blur, change' }]"
            >
              <el-date-picker
                v-model="data.effectiveDate"
                type="date"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-form>
        </div>
      </el-upload>
      <div slot="footer" class="m-footer">
        <el-button type="success" size="medium" @click="visibles = false">取 消</el-button>
        <el-button
          style="margin-left: 10px;"
          size="medium"
          type="warning"
          @click="handleSubmitUpload"
          >上传</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Upload as ElUpload } from 'element-ui';
import DoorsWindowsApi from '@/ts/api/doors-windows-api';
import { InspectionReportFile } from '@/ts/models/doors-windows';
import { ElForm } from 'element-ui/types/form';

@Component({
  components: {},
})
export default class LogisticsNodesModify extends Vue {
  private visibles = false;
  /** 设置有效时间 */
  private data = {
    effectiveDate: '',
  };

  paramsFile: InspectionReportFile = new InspectionReportFile();

  /** 组件打开 */
  public open(cateLogId: number, id?: number): void {
    this.paramsFile.cateLogId = cateLogId;
    this.visibles = true;
    if (id) {
      this.paramsFile.id = id;
    }
  }

  /** 上传接口地址 */
  get uploadUrl(): string {
    return DoorsWindowsApi.inspectionReportUploadFile();
  }

  handleFail(err: string) {
    console.log(`上传失败原因-${err}`);
    this.$message.error('上传失败');
  }

  /** 上传成功回调 */
  private handleSuccess(response: { success: boolean }): void {
    if (response) {
      this.$message.success('上传成功');
      (this.$refs.upload as ElUpload).clearFiles();
      this.visibles = false;
      this.$emit('refresh');
    } else {
      this.$message.error('上传失败');
    }
  }

  handleBeforUpload(file: File) {
    this.paramsFile.fileName = file.name;
    if (!this.paramsFile.id) {
      this.paramsFile.id = 0;
    }
    this.paramsFile.effectiveDate = this.data.effectiveDate;
  }

  /** 上传事件 */
  private handleSubmitUpload() {
    (this.$refs.form as ElForm).validate((result: boolean) => {
      if (result) {
        (this.$refs.upload as ElUpload).submit();
      }
    });
  }
}
</script>
<style lang="scss" scoped>
.m-inspection-report-upload-modify {
  .m {
    &-tip {
      color: #333;
      font-size: 12px;
      margin: 6px 0;
    }

    &-footer {
      text-align: right;
      margin-top: 10px;
    }
  }
}
</style>