VUE学习之Element-ui文件上传实例详解

下面是对题目所给文章的详细讲解。

文章概述

本文讲解了如何在Vue项目中使用Element-ui的文件上传组件，并提供了一个完整的示例。文章中介绍了如何安装Element-ui，以及如何使用它提供的el-upload组件实现文件上传。

Element-ui简介与安装说明

Element-ui是一套基于Vue.js 2.0的组件库，它提供了许多常用的UI组件，如按钮、表单、表格、分页等，包含了丰富的功能和样式，而且易于使用和定制。

Element-ui的安装非常简单，只需要在终端中运行以下命令即可：

npm install element-ui -S

Element-ui文件上传组件的使用说明

Element-ui提供了一个el-upload组件，可以很容易地实现文件上传的功能。这个组件有几个非常重要的属性：

action：上传的地址；
headers：上传的请求头；
multiple：是否支持多文件上传；
show-upload-list：是否显示上传列表；
on-success：上传成功的回调函数;
on-error：上传失败的回调函数。

实现示例

下面是一个完整的使用Element-ui的文件上传组件的示例：

<template>
  <div>
    <el-upload
      class="upload"
      :action="url"
      :headers="{'Authorization': token}"
      :multiple="true"
      :show-upload-list="true"
      :on-success="handleSuccess"
      :on-error="handleError">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
    </el-upload>
  </div>
</template>

<script>
export default {
  name: 'upload',
  data () {
    return {
      url: 'your-upload-url',
      token: 'your-token'
    }
  },
  methods: {
    handleSuccess (response, file, fileList) {
      console.log(response, file, fileList)
      this.$message.success(`上传成功: ${file.name}`);
    },
    handleError (err, file, fileList) {
      console.log(err, file, fileList)
      this.$message.error(`上传失败: ${file.name}`);
    }
  }
}
</script>

其中，url和token分别为上传文件的地址和验证信息，可以根据实际情况进行修改。handleSuccess和handleError分别是上传成功和上传失败的回调函数，可以根据实际情况进行处理。此外，el-upload还支持一些其他的属性，可以前往Element-ui官网进行查看。

示例说明

示例一

假设我们需要实现一个文件上传的功能，在Vue项目中使用Element-ui的el-upload组件来上传文件。首先，我们需要安装Element-ui组件库，可以运行下面的命令：

npm install element-ui -S

然后，我们需要在Vue项目中使用el-upload组件，可以按照以下步骤进行：

在需要引入文件上传的页面中，首先引入Element-ui组件库：

<script>
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

export default {
  name: 'app',
  components: {
    ElementUI
  }
}
</script>

在需要引入文件上传的页面中，添加el-upload组件：

<template>
  <div>
    <el-upload
      class="upload"
      :action="url"
      :headers="{'Authorization': token}"
      :multiple="true"
      :show-upload-list="true"
      :on-success="handleSuccess"
      :on-error="handleError">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
    </el-upload>
  </div>
</template>

在需要引入文件上传的页面中，定义url和token等参数，并实现handleSuccess和handleError方法：

<script>
export default {
  name: 'upload',
  data () {
    return {
      url: 'your-upload-url',
      token: 'your-token'
    }
  },
  methods: {
    handleSuccess (response, file, fileList) {
      console.log(response, file, fileList)
      this.$message.success(`上传成功: ${file.name}`);
    },
    handleError (err, file, fileList) {
      console.log(err, file, fileList)
      this.$message.error(`上传失败: ${file.name}`);
    }
  }
}
</script>

最后，在需要引入文件上传的页面中，添加样式：

<style scoped>
.upload {
  display: inline-block;
  margin-top: 20px;
}
</style>

示例二

假设我们需要上传多个文件，并显示上传进度条。此时，我们可以设置el-upload组件的show-progress属性为true，并且添加el-progress组件来显示进度条：

<template>
  <div>
    <el-upload
      class="upload"
      :action="url"
      :headers="{'Authorization': token}"
      :multiple="true"
      :show-upload-list="true"
      :show-progress="true"
      :on-success="handleSuccess"
      :on-error="handleError">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
    </el-upload>
    <el-progress :percentage="uploadPercentage"></el-progress>
  </div>
</template>

其中，uploadPercentage为上传进度条的百分比，可以根据实际情况进行计算。handleSuccess方法可以修改为：

handleSuccess (response, file, fileList) {
  console.log(response, file, fileList)
  this.$message.success(`上传成功: ${file.name}`);
  this.uploadPercentage = 100;
},

每当上传成功时，就会将uploadPercentage设置为100，这样el-progress组件就会显示上传进度条为100%。