element-ui中的upload组件的使用案例

upload组件的使用

01.Description

工作中往往有需求获取相应的文件

02.template代码

 <div style="padding-bottom: 30px;">
          <el-form label-position="right" style="margin-left: 50px;">
            <el-form-item label="是否收取手续费" style="margin-top: 30px;">
              <el-radio-group v-model="isChargeComn">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否，手续费已减免</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-show="isChargeComn==='1'" label="上传手续费凭证" style="margin-top: 30px;">
              <upload
                ref="upload"
                accept="图片，pdf，word"
                style="margin-right: 20px"
                :file-list="file ? [file] : []"
                @handleRemove="delFile"
                @handleChange="handleChange"
                @handlePreview="handlePreview"
              />
            </el-form-item>
          </el-form>
        </div>

 03.script代码

  import upload from '@/components/upload3'
  import api from '@/api/modules/operation/company'

export default {
    
    data（）{

        return{

            isChargeComn: '1', //是否减免手续费
            // 上传的文件
            file: null,
        }
    }
    
     watch: {
      // 切换是否减免手续费时，清空文件
      isChargeComn() {
        this.delFile()
      }
    },

    handleChange(e) {
        // 支持的文件类型
        const allowType = ['image', 'pdf', 'doc', 'docx', 'application/wps-writer', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document']
        const file = e.raw
        if (allowType.every(i => file.type.indexOf(i) === -1)) {
          this.file = null
          this.$refs['upload'].clearFils()
          return this.$notify.error('只支持图片，pdf，word文件')
        }
        const loading = this.$loading({
          lock: true,
          text: '上传中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        const formData = new FormData()
        formData.append('file', file)
        api.uploadFile(formData).then((res) => {
          if (res.success && res.code == '200') {
            this.file = {
              fileUrl: res.data.annexPath,
              fileType: res.data.annexSuffix,
              name: res.data.orgAnnexName
            }
            console.log(res)
          } else {
            this.file = null
            this.$refs['upload'].clearFils()
          }
        }).finally(() => {
          loading.close()
        })
      },
      delFile() {
        this.file = null
        this.$refs['upload'].clearFils()
      },
      // 文件预览
      handlePreview() {
        window.open(this.file.fileUrl)
      },

04.子组件代码

<template>
  <div class="upload3">
    <el-upload
      ref="upload"
      :accept="accept"
      action="#"
      multiple
      :auto-upload="false"
      :disabled="disabled"
      :file-list="fileList"
      :on-change="handleChange"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
    >
      <el-button v-if="!disabled" size="small" type="primary" style="margin-bottom:5px">点击上传</el-button>
    </el-upload>
    <div v-if="ifShow" slot="tip" class="el-upload__tip">
      <p v-if="acceptShow">只支持<span>{{ accept }}</span>文件</p>
      <p>只能上传<span style="color: red; font-size: 20px">&nbsp;{{ limit }}&nbsp;</span>个文件</p>
    </div>
  </div>
</template>

<script>
export default {
  components: {
  },
  props: {
    fileList: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 是否禁止上传
    disabled: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    accept: {
      type: String,
      default: () => {
        return 'jpg、jpeg、bmp、png、pdf、docx'
      }
    },
    limit: {
      type: Number,
      default: () => {
        return 1
      }
    },
    ifShow: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    acceptShow: {
      type: Boolean,
      default: () => {
        return true
      }
    }
  },
  data() {
    return {

    }
  },
  watch: {

  },
  created() {

  },
  methods: {
    handleChange(file, fileList) {
      console.log(fileList, '9988')
      this.$emit('handleChange', file, fileList)
    },

    handlePreview(file) {
      this.$emit('handlePreview', file)
    },

    handleRemove(file, fileList) {
      console.log(fileList, '删除')
      this.$emit('handleRemove', file, fileList)
    },
    // 清空数据列表
    clearFils() {
      const idx = this.$refs.upload.uploadFiles.findIndex(res => res)
      this.$refs.upload.uploadFiles.splice(idx, 1)
    }
  }
}
</script>

  <style lang="scss" scoped>
.el-upload__tip{
  p:nth-child(2){
    margin-top:-5px;
  }
}
  </style>

结束语：

本文就到此结束了，希望大家共同努力，早日拿下 el 💪💪。

如果文中有不对的地方，或是大家有不同的见解，欢迎指出 🙏🙏。

如果大家觉得所有收获，欢迎一键三连💕💕。