elementUI怎么使用el-upload上传文件

发布时间：2023-03-09 14:08:29 作者：iii
来源：亿速云阅读：219

ElementUI怎么使用el-upload上传文件

简介

ElementUI 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。其中，el-upload 组件是用于文件上传的常用组件。通过 el-upload，用户可以轻松实现文件上传功能，并且支持多种上传方式、文件类型限制、上传前的预处理等功能。

本文将详细介绍如何使用 el-upload 组件来实现文件上传功能，并探讨一些常见的用法和问题。

基本用法

首先，我们需要在项目中引入 ElementUI 并注册 el-upload 组件。以下是一个简单的示例：

<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-success="handleSuccess"
    :on-error="handleError"
    :before-upload="beforeUpload">
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      console.log('上传成功', response);
    },
    handleError(err, file, fileList) {
      console.error('上传失败', err);
    },
    beforeUpload(file) {
      console.log('上传前的预处理', file);
      return true; // 返回 false 可以阻止上传
    }
  }
}
</script>

在这个示例中，action 属性指定了文件上传的服务器地址。on-success 和 on-error 分别用于处理上传成功和失败的回调。before-upload 用于在上传前对文件进行预处理，返回 false 可以阻止文件上传。

文件上传的限制

在实际应用中，我们通常需要对上传的文件进行一些限制，例如文件类型、文件大小等。el-upload 提供了 accept 和 limit 属性来实现这些限制。

<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-success="handleSuccess"
    :on-error="handleError"
    :before-upload="beforeUpload"
    accept=".jpg,.jpeg,.png"
    :limit="5"
    :on-exceed="handleExceed">
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      console.log('上传成功', response);
    },
    handleError(err, file, fileList) {
      console.error('上传失败', err);
    },
    beforeUpload(file) {
      const isImage = file.type.startsWith('image/');
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isImage) {
        this.$message.error('只能上传图片文件');
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB');
      }
      return isImage && isLt2M;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`最多只能上传 ${this.limit} 个文件`);
    }
  }
}
</script>

在这个示例中，accept 属性限制了上传文件的类型为 .jpg, .jpeg, .png。limit 属性限制了最多上传 5 个文件。on-exceed 用于处理文件数量超出限制的情况。

自定义上传行为

有时候，我们需要自定义上传行为，例如使用 axios 进行文件上传。el-upload 提供了 http-request 属性来实现自定义上传。

<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    :http-request="customUpload">
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    customUpload(file) {
      const formData = new FormData();
      formData.append('file', file.file);

      axios.post('https://jsonplaceholder.typicode.com/posts/', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log('上传成功', response);
      }).catch(error => {
        console.error('上传失败', error);
      });
    }
  }
}
</script>

在这个示例中，我们使用 axios 进行文件上传，并通过 http-request 属性指定了自定义的上传方法。

文件列表的管理

el-upload 组件默认会显示已上传的文件列表。我们可以通过 file-list 属性来管理文件列表。

<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    :file-list="fileList"
    :on-success="handleSuccess"
    :on-remove="handleRemove">
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      this.fileList = fileList;
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
    }
  }
}
</script>

在这个示例中，我们通过 file-list 属性绑定了文件列表，并在上传成功和删除文件时更新文件列表。

多文件上传

el-upload 组件支持多文件上传。我们可以通过 multiple 属性来启用多文件上传。

<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    :multiple="true"
    :on-success="handleSuccess">
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      console.log('上传成功', response);
    }
  }
}
</script>

在这个示例中，我们通过 multiple 属性启用了多文件上传功能。

拖拽上传

el-upload 组件还支持拖拽上传。我们可以通过 drag 属性来启用拖拽上传。

<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    :drag="true"
    :on-success="handleSuccess">
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      console.log('上传成功', response);
    }
  }
}
</script>

在这个示例中，我们通过 drag 属性启用了拖拽上传功能，并自定义了拖拽区域的显示内容。

上传前的预处理

在上传文件之前，我们可能需要对文件进行一些预处理，例如压缩图片、重命名文件等。el-upload 提供了 before-upload 钩子来实现这些功能。

<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    :before-upload="beforeUpload">
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          const img = new Image();
          img.src = reader.result;
          img.onload = () => {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
            canvas.toBlob(blob => {
              const compressedFile = new File([blob], file.name, {
                type: 'image/jpeg',
                lastModified: Date.now()
              });
              resolve(compressedFile);
            }, 'image/jpeg', 0.8);
          };
        };
      });
    }
  }
}
</script>

在这个示例中，我们使用 before-upload 钩子对图片进行了压缩处理，并返回了压缩后的文件。

上传过程中的事件处理

el-upload 组件提供了多个事件钩子，用于处理上传过程中的各种事件。例如，on-progress 用于处理上传进度，on-change 用于处理文件状态变化等。

<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-progress="handleProgress"
    :on-change="handleChange">
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleProgress(event, file, fileList) {
      console.log('上传进度', event.percent);
    },
    handleChange(file, fileList) {
      console.log('文件状态变化', file.status);
    }
  }
}
</script>

在这个示例中，我们通过 on-progress 和 on-change 钩子分别处理了上传进度和文件状态变化。

上传后的处理

文件上传完成后，我们通常需要对上传结果进行处理。el-upload 提供了 on-success 和 on-error 钩子来处理上传成功和失败的情况。

<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-success="handleSuccess"
    :on-error="handleError">
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      console.log('上传成功', response);
    },
    handleError(err, file, fileList) {
      console.error('上传失败', err);
    }
  }
}
</script>

在这个示例中，我们通过 on-success 和 on-error 钩子分别处理了上传成功和失败的情况。

常见问题与解决方案

1. 文件上传失败

问题描述：文件上传失败，返回错误信息。

解决方案：检查服务器地址是否正确，确保服务器支持文件上传，并检查文件大小和类型是否符合要求。

2. 文件上传进度不显示

问题描述：文件上传进度条不显示或显示不正确。

解决方案：确保 on-progress 钩子正确绑定，并检查服务器是否支持上传进度的返回。

3. 文件上传后无法删除

问题描述：文件上传后无法从文件列表中删除。

解决方案：确保 on-remove 钩子正确绑定，并在删除文件时更新文件列表。

4. 文件上传前的预处理失败

问题描述：文件上传前的预处理失败，导致文件无法上传。

解决方案：检查 before-upload 钩子中的逻辑，确保返回的文件格式正确。

总结

el-upload 组件是 ElementUI 中非常强大的文件上传组件，支持多种上传方式、文件类型限制、上传前的预处理等功能。通过本文的介绍，相信你已经掌握了如何使用 el-upload 组件来实现文件上传功能，并能够处理一些常见的问题。

在实际开发中，根据具体需求灵活运用 el-upload 组件的各种属性和事件钩子，可以大大提升文件上传功能的用户体验和开发效率。希望本文对你有所帮助，祝你在使用 ElementUI 开发项目时顺利愉快！