Vue 使用 Element-ui upload 组件实现上传文件到七牛和数据回显

使用Vue和Element-UI实现文件上传和数据回显

文件上传概述

文件上传是一个常见的操作，允许用户将文件从本地计算机上传到服务器或云存储。在本文中，我们将探讨如何使用Vue和Element-UI库轻松实现文件上传功能。

安装依赖

要开始使用，你需要安装Vue和Element-UI库：

npm install vue
npm install element-ui

导入组件

安装完成后，在你的Vue组件中导入Element-UI的上传组件：

import { Upload } from 'element-ui'
Vue.component('el-upload', Upload)

上传组件

在你的Vue组件的模板中，使用el-upload组件定义文件上传区域：

<el-upload
  :action="uploadUrl"
  :show-file-list="false"
  :on-success="handleUploadSuccess"
  :on-error="handleUploadError"
>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>

上传配置

• action： 文件上传的地址
• show-file-list： 是否显示文件列表（设置为false以隐藏列表）
• on-success： 文件上传成功时的回调函数
• on-error： 文件上传失败时的回调函数

处理文件上传

在Vue组件的脚本中，定义处理文件上传成功和失败的回调函数：

methods: {
  handleUploadSuccess(response) {
    // 处理文件上传成功的情况
    console.log(response)
  },
  handleUploadError(error) {
    // 处理文件上传失败的情况
    console.log(error)
  }
}

数据回显

数据回显是指将上传的文件信息展示在页面上。我们可以通过在el-upload组件中使用v-model指令来实现此功能：

<el-upload
  ref="upload"
  :action="uploadUrl"
  :show-file-list="true"
  :on-success="handleUploadSuccess"
  :on-error="handleUploadError"
  v-model="fileList"
>

展示上传文件

在Vue组件的模板中，我们可以使用v-for指令来展示上传的文件信息：

<ul>
  <li v-for="file in fileList">
    {{ file.name }}
  </li>
</ul>

示例代码

以下是一个完整的示例代码：

<template>
  <div>
    <el-upload
      ref="upload"
      :action="uploadUrl"
      :show-file-list="true"
      :on-success="handleUploadSuccess"
      :on-error="handleUploadError"
      v-model="fileList"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <ul>
      <li v-for="file in fileList">
        {{ file.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { Upload } from 'element-ui'
export default {
  components: {
    Upload
  },
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    handleUploadSuccess(response) {
      this.fileList.push({
        name: response.data.name,
        url: response.data.url
      })
    },
    handleUploadError(error) {
      console.log(error)
    }
  }
}
</script>

常见问题解答

• 如何限制上传文件的数量？

<el-upload
  :action="uploadUrl"
  :limit="1"
  :show-file-list="true"
  :on-success="handleUploadSuccess"
  :on-error="handleUploadError"
  v-model="fileList"
>

• 如何自定义上传按钮的样式？

在el-upload组件中使用slot：

<el-upload
  ref="upload"
  :action="uploadUrl"
  :show-file-list="true"
  :on-success="handleUploadSuccess"
  :on-error="handleUploadError"
  v-model="fileList"
>
  <button slot="default" class="custom-upload-button">
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  </button>
</el-upload>

• 如何使用七牛云存储作为上传目标？

uploadUrl: 'https://upload.qiniu.com'

• 如何上传特定类型的文件？

<el-upload
  :action="uploadUrl"
  :show-file-list="true"
  :accept="acceptTypes"
  :on-success="handleUploadSuccess"
  :on-error="handleUploadError"
  v-model="fileList"
>

• 如何禁用文件上传？

<el-upload
  :action="uploadUrl"
  :show-file-list="true"
  :disabled="true"
  :on-success="handleUploadSuccess"
  :on-error="handleUploadError"
  v-model="fileList"
>