详解Element-UI中上传的文件前端处理

下面就是详解 "Element-UI中上传的文件前端处理" 的完整攻略。

一、前言

Element-UI 是饿了么前端团队开发并开源的一款基于 Vue.js 2.0 的 UI 组件库，拥有非常丰富的组件和样式，其中包含了上传文件的组件。然而，如果我们需要自定义上传文件前的处理流程，怎么做呢？本文将详细介绍 Element-UI 中上传文件前端处理的方法。

二、上传文件前端处理的方法

在 Element-UI 中，上传文件主要有两个组件：el-upload 和 el-upload-dragger，分别用于选择文件和拖拽上传。

1. el-upload 的上传前处理方法

当我们使用 el-upload 组件上传文件时，可以通过配置 before-upload 属性来实现上传前的处理。

<el-upload
  class="upload-demo"
  action="/upload"
  :before-upload="checkImage"
>

在上述代码中，我们通过配置 before-upload 属性绑定一个名为 checkImage 的方法，在上传前进行图片格式检查，然后再返回 true 或 false，来决定是否继续上传。

下面是一个示例代码，实现上传图片前的宽高检查处理：

<template>
  <el-upload
    class="avatar-uploader"
    action="//jsonplaceholder.typicode.com/posts/"
    :show-file-list="false"
    :before-upload="handlerImageUpload">
    <div class="avatar-box">
      <img v-if="showImg" :src="imageUrl" class="avatar">
      <div v-else class="avatar-placeholder">
        <i class="el-icon-plus avatar-uploader-icon"></i>
      </div>
    </div>
  </el-upload>
</template>

<script>
  export default {
    data() {
      return {
        imageUrl: '',
        showImg: false
      }
    },
    methods: {
      async handlerImageUpload(file) {
        const { width, height } = await this.getImageSize(file)
        if (width < 400 || height < 400) {
          this.$message.warning('图片宽高不能小于400像素')
          return false
        } else {
          this.imageUrl = URL.createObjectURL(file)
          this.showImg = true
          return true
        }
      },
      getImageSize(file) {
        return new Promise(resolve => {
          const img = new Image()
          img.onload = () => {
            resolve({
              width: img.width,
              height: img.height
            })
          }
          img.src = URL.createObjectURL(file)
        })
      }
    }
  }
</script>

<style scoped>
  .avatar-uploader {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-right: 10px;
  }

  .avatar-box {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid #dcdfe6;
    background-size: cover;
    background-position: center;
  }

  .avatar-placeholder {
    border: 1px dashed #dcdfe6;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 99px;
    font-size: 22px;
    color: #8c939d;
    box-sizing: border-box;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    line-height: 99px;
  }
</style>

在以上代码中，我们在 handlerImageUpload 方法中获取文件的大小和宽高等信息，并根据宽高限制决定是否上传，最后返回 true 或 false。

2. el-upload-dragger 的上传前处理方法

当我们使用 el-upload-dragger 组件上传文件时，可以在 before-upload 事件中进行上传前的处理。

<el-upload-dragger
  class="upload-demo"
  action="/upload"
  @before-upload="checkImage"
>

在上述代码中，我们通过配置 before-upload 事件绑定一个名为 checkImage 的方法，在上传前进行图片格式检查，然后再返回 true 或 false，来决定是否继续上传。

下面是一个示例代码，实现拖拽上传前的宽高检查处理：

<template>
  <el-upload-dragger
    class="avatar-uploader"
    :show-file-list="false"
    :before-upload="handlerImageUpload">
    <div class="avatar-box">
      <img v-if="showImg" :src="imageUrl" class="avatar">
      <div v-else class="avatar-placeholder">
        <i class="el-icon-plus avatar-uploader-icon"></i>
        <div class="avatar-text">拖拽上传图片</div>
      </div>
    </div>
  </el-upload-dragger>
</template>

<script>
  export default {
    data() {
      return {
        imageUrl: '',
        showImg: false
      }
    },
    methods: {
      async handlerImageUpload(file) {
        const { width, height } = await this.getImageSize(file)
        if (width < 400 || height < 400) {
          this.$message.warning('图片宽高不能小于400像素')
          return false
        } else {
          this.imageUrl = URL.createObjectURL(file)
          this.showImg = true
          return true
        }
      },
      getImageSize(file) {
        return new Promise(resolve => {
          const img = new Image()
          img.onload = () => {
            resolve({
              width: img.width,
              height: img.height
            })
          }
          img.src = URL.createObjectURL(file)
        })
      }
    }
  }
</script>

<style scoped>
  .avatar-uploader {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-right: 10px;
  }

  .avatar-box {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid #dcdfe6;
    background-size: cover;
    background-position: center;
  }

  .avatar-placeholder {
    border: 1px dashed #dcdfe6;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    line-height: 99px;
  }

  .avatar-text {
    font-size: 12px;
    color: #8c939d;
    margin-top: 10px;
  }
</style>

以上就是 Element-UI 中上传文件前端处理的详细攻略，我们可以在上传前进行自定义的处理，来实现更加丰富的上传交互效果。