Ts中el-upload写法

<template>
  <el-dialog :title="titles" :close-on-click-modal="false" :visible.sync="dialogAddorEdit" center width="340px">
    <el-form :rules="rules" ref="formData" :model="formData" label-width="80px">
      <el-form-item label-width="100px" label="库位名称：" prop="warehouseName">
        <el-input v-model="formData.warehouseName" maxlength="60" clearable></el-input>
      </el-form-item>
      <!-- <el-form-item  label-width="100px" label="物料信息" prop="guige">
        <el-input v-model="formData.materialInfo" maxlength="2000"  clearable></el-input>
      </el-form-item> -->
      <el-form-item label-width="100px" label="位置描述：" prop="warehouseLocation">
        <el-input v-model="formData.warehouseLocation" maxlength="2000" clearable></el-input>
      </el-form-item>
      <el-form-item label-width="100px" label="添加图片：" prop="type">
        <el-upload
          :class="{ hide: hideUpload }"
          :on-success="onSuccess"
          :limit="1"
          action="#"
          list-type="picture-card"
          :file-list="fileList"
          :before-upload="beforeAvatarUpload"
          :on-change="handleIntroduceUploadHide"
          :http-request="overridehttprequest"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" append-to-body>
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button size="small" @click="handleClose">取消</el-button>
      <el-button size="small" type="primary" @click="upload('formData')">确定</el-button>
    </span>
  </el-dialog>
</template>
<script lang="ts">
import ComponentBase from '@src/views/ComponentBase'
import { Component, Prop, Vue, Emit, Watch } from 'vue-property-decorator'
@Component({})
export default class addUpdateApplication extends ComponentBase {
  private dialogAddorEdit: Boolean = false
  private titles: string = ''
  private id: string = ''
  public openDialog(key, val) {
    if (key == '新增') {
      this.formData = {}
      this.hideUpload = false
      this.dialogAddorEdit = true
      this.imgbase64str = ''
      this.titles = key
    } else if (key == '编辑') {
      this.dialogAddorEdit = true
      this.titles = key
      this.id = val.id
      this.formData = JSON.parse(JSON.stringify(val))

      this.imgbase64str = val.warehouseImage
      this.fileList = []
      if (val.warehouseImage) {
        this.hideUpload = true
        this.fileList.push({
          url: val.warehouseImage ? val.warehouseImage : ''
        })
      } else {
        this.hideUpload = false

        // console.log('没有图片')
      }
    }
  }
  // 自定义上传 重要
  private imgbase64str: string = ''
  private async overridehttprequest(e) {
    this.fileList = []
    this.imgbase64str = await this.blobToBase64(e.file)
    this.fileList.push({
      name: e.file.name,
      url: this.imgbase64str
    })
  }
  // 转64
  private blobToBase64(blob): Promise<any> {
    return new Promise<any>((resolve, reject) => {
      let fileReader = new FileReader()
      fileReader.onload = (e) => {
        resolve(e.target.result)
      }
      fileReader.readAsDataURL(blob)
      fileReader.onerror = () => {
        reject(new Error('blobToBase64 error'))
      }
    })
  }
  // 用于隐藏
  private hideUpload: boolean = false
  private limitCount: Number = 1
  // 放图片
  private fileList: any[] = []
  private dialogVisible: boolean = false
  // 上传成功
  private onSuccess(res, file, fileList) {
    //hideUpload是否为true或false 看后面的条件是否成立
    this.hideUpload = fileList.length >= this.limitCount
  }

  // 文件删除时
  private handleRemove(file, fileList) {
    // console.log('删除')
    this.fileList = []
    this.imgbase64str = ''
    this.hideUpload = fileList.length >= this.limitCount
  }
  //文件状态改变的钩子
  private handleIntroduceUploadHide(file, fileList) {
    this.hideUpload = fileList.length >= this.limitCount
  }
  // 删除前
  private beforeRemove(file, fileList) {}
  private dialogImageUrl: string = ''
  // 点击文件列表中已上传的文件时的钩子
  private handlePictureCardPreview(file) {
    this.dialogImageUrl = file.url
    this.dialogVisible = true
  }
  // 上传图片之前校验
  beforeAvatarUpload(file) {
    const isLt2M = file.size / 1024 < 500
    const isJPG = file.type === 'image/jpg'
    const isJPEG = file.type === 'image/jpeg'
    const isPNG = file.type === 'image/png'

    if (!isLt2M) {
      this.$message.error('上传头像图片大小不能超过 500kb!')
    } else if (!isPNG && !isJPG && !isJPEG) {
      this.$message.error('上传图片格式不正确!')
    }
    return (isPNG && isLt2M) || (isJPG && isLt2M) || (isJPEG && isLt2M)
  }
  public editMode: Boolean = false
  private rules: any = {
    warehouseName: [
      { required: true, message: '请输入库位名称', trigger: 'blur' },
      // { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
    ],
    warehouseLocation: [
      { required: true, message: '请输入位置描述', trigger: 'blur' },
      { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
    ]
  }
  private async upload(formData) {
    let addObj = {
      code: '1',
      warehouseName: this.formData.warehouseName,
      // materialInfo:this.formData.materialInfo,
      warehouseLocation: this.formData.warehouseLocation,
      warehouseImage: this.imgbase64str
    }
    let editObj = {
      code: '1',
      id: this.id,
      warehouseName: this.formData.warehouseName,
      // materialInfo:this.formData.materialInfo,
      warehouseLocation: this.formData.warehouseLocation,
      warehouseImage: this.imgbase64str
    }
    ;(this.$refs[formData] as any).validate((valid) => {
      if (valid) {
        this.dialogAddorEdit = false
        if (this.titles == '新增') {
          this.onSure(addObj, this.titles)
        } else if (this.titles == '编辑') {
          this.onSure(editObj, this.titles)
        }
      } else {
        return false
      }
    })
  }
  // 关闭对话框,清除表单
  private handleClose() {
    this.dialogAddorEdit = false
    this.fileList = []
    // this.clearForm()
    ;(this.$refs['formData'] as any).resetFields()
  }
  private formData: any = {
    warehouseName: '',
    // materialInfo: "",
    warehouseLocation: '',
    warehouseImage: ''
  }
  @Emit('onSure')
  private onSure(data: any, key: any) {}
}
</script>
<style lang="less" scoped>
::v-deep .el-input--suffix .el-input__inner {
  padding-right: 30px;
  width: 188px;
}
/deep/.hide .el-upload--picture-card {
  display: none;
}
/deep/ .el-upload--picture-card {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 80;
  height: 80;
  position: relative;
  line-height: 146px;
  vertical-align: top;
}
/deep/.el-upload--picture-card i {
  font-size: 28px;
  color: #8c939d;
  position: absolute;
  top: 30%;
  right: 31%;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item {
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  margin: 0 8px 8px 0;
  display: inline-block;
}
</style>