vue使用el-upload实现文件上传功能

1. 确定需求及环境配置

在使用el-upload组件之前，首先需要确定需求以及进行环境配置。

需求：实现上传文件功能，支持单文件和多文件上传，显示上传进度及结果。

环境配置：Vue.js和Element UI组件库的安装和引入。可以通过npm进行安装：

npm install vue --save
npm install element-ui --save

引入Vue和Element组件库：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

1. 创建上传组件

在Vue组件中，通过el-upload组件实现文件上传功能。

<template>
  <el-upload
    :action="uploadUrl"    //上传文件的url地址
    :multiple="multiple"   //是否支持多文件上传
    :auto-upload="false"   //是否开启自动上传
    :show-file-list="false"//是否显示已上传的文件列表
    ref="upload"
    :on-success="onSuccess"//上传成功回调函数
    :on-error="onError"    //上传失败回调函数
  >
    <el-button size="small" type="primary">选择文件</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: '/upload',  //上传文件的url地址
      multiple: true,        //是否支持多文件上传
    }
  },
  methods: {
    //上传成功
    onSuccess(response, file, fileList) {
      console.log(fileList)
    },
    //上传失败
    onError (err) {
      console.log(err)
    }
  }
}
</script>

其中，el-upload组件具有多个属性，特别需要说明的是：

• action：上传文件的url地址；
• multiple：是否支持多文件上传；
• auto-upload：是否开启自动上传；
• show-file-list：是否显示已上传的文件列表。

同时，el-upload组件提供了两个回调函数：

• onSuccess：上传成功后的回调函数，在此函数中可以获取到上传的文件信息；

• onError：上传失败后的回调函数，在此函数中可以获取到上传失败的原因信息。

• 添加上传按钮

在el-upload组件包裹的区域中添加一个上传按钮，用于触发上传文件功能。

<el-upload
  :action="uploadUrl"    //上传文件的url地址
  :multiple="multiple"   //是否支持多文件上传
  :auto-upload="false"   //是否开启自动上传
  :show-file-list="false"//是否显示已上传的文件列表
  ref="upload"
  :on-success="onSuccess"//上传成功回调函数
  :on-error="onError"    //上传失败回调函数
>
  <el-button size="small" type="primary">选择文件</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<el-button type="primary" @click="submitUpload">上传至服务器</el-button>

其中，点击“选择文件”按钮，会弹出系统文件选择框，选择需要上传的文件；点击“上传至服务器”按钮，会将选择的文件上传至服务器。

1. 触发上传功能

在el-upload组件中，有两种方式触发上传功能：自动上传和手动上传。

手动上传需要在上传按钮触发的方法中，通过调用el-upload组件的upload方法来实现：

submitUpload() {
  //手动上传文件
  this.$refs.upload.submit()
}

这样，点击“上传至服务器”按钮时，就会调用submitUpload方法，从而手动触发上传功能。

1. 示例说明

在上述步骤完成后，我们来看两个简单的示例：单文件上传和多文件上传。

示例一：单文件上传

需要上传文件：1张图片。

代码演示：

<template>
  <el-upload
    :action="uploadUrl"    //上传文件的url地址
    :multiple="false"      //是否支持多文件上传
    :auto-upload="false"   //是否开启自动上传
    :show-file-list="false"//是否显示已上传的文件列表
    ref="upload"
    :on-success="onSuccess"//上传成功回调函数
    :on-error="onError"    //上传失败回调函数
  >
    <el-button size="small" type="primary">选择文件</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
  <el-button type="primary" @click="submitUpload">上传至服务器</el-button>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: '/upload',  //上传文件的url地址
    }
  },
  methods: {
    //上传成功
    onSuccess(response, file, fileList) {
      console.log(fileList)
    },
    //上传失败
    onError (err) {
      console.log(err)
    },
    //手动上传文件
    submitUpload() {
      this.$refs.upload.submit()
    }
  }
}
</script>

点击“选择文件”按钮，选择一张图片后，点击“上传至服务器”按钮，即可完成文件上传的过程。

示例二：多文件上传

需要上传文件：2张图片。

代码演示：

<template>
  <el-upload
    :action="uploadUrl"    //上传文件的url地址
    :multiple="true"       //是否支持多文件上传
    :auto-upload="false"   //是否开启自动上传
    :show-file-list="false"//是否显示已上传的文件列表
    ref="upload"
    :on-success="onSuccess"//上传成功回调函数
    :on-error="onError"    //上传失败回调函数
  >
    <el-button size="small" type="primary">选择文件</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
  <el-button type="primary" @click="submitUpload">上传至服务器</el-button>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: '/upload',  //上传文件的url地址
    }
  },
  methods: {
    //上传成功
    onSuccess(response, file, fileList) {
      console.log(fileList)
    },
    //上传失败
    onError (err) {
      console.log(err)
    },
    //手动上传文件
    submitUpload() {
      this.$refs.upload.submit()
    }
  }
}
</script>

点击“选择文件”按钮，选择2张图片后，点击“上传至服务器”按钮，即可完成文件上传的过程。