前端多图片上传组件，功能全面、使用便捷

2024-01-14 19:22:37

Vue Uni-App 中使用多图片上传组件

概述

随着互联网的蓬勃发展，多图片上传功能在各行各业中变得愈发重要。在 Vue Uni-app 框架中，借助强大的多图片上传组件，实现这一功能轻而易举。该组件不仅支持单个文件，还支持多文件上传，并提供直观的进度条来实时跟踪上传进展。

安装与使用

安装

npm install vue-multi-upload

引入组件

import Vue from 'vue'
import VueMultiUpload from 'vue-multi-upload'

Vue.component('vue-multi-upload', VueMultiUpload)

HTML 使用

<vue-multi-upload
  :accept="['image/*']"
  :multiple="true"
  :max-size="1024 * 1024"
  :upload-url="'/upload'"
  @progress="onProgress"
  @success="onSuccess"
  @error="onError"
/>

组件配置

accept: 指定可上传的文件类型，例如：['image/*'] 表示只允许上传图片。
multiple: 指定是否允许上传多个文件，默认为 false。
max-size: 设置单个文件大小限制，单位为字节，默认为 1024 * 1024。
upload-url: 指定上传文件的目标地址。
progress: 上传进度事件，返回进度信息。
success: 上传成功事件，返回服务器响应数据。
error: 上传失败事件，返回错误信息。

事件处理

在 Vue 实例中，可以通过监听事件来处理上传过程中的各种情况：

export default {
  methods: {
    onProgress(progress) {
      console.log(progress)
    },
    onSuccess(response) {
      console.log(response)
    },
    onError(error) {
      console.log(error)
    }
  }
}

示例代码

<template>
  <vue-multi-upload
    :accept="['image/*']"
    :multiple="true"
    :max-size="1024 * 1024"
    :upload-url="'/upload'"
    @progress="onProgress"
    @success="onSuccess"
    @error="onError"
  />
</template>

<script>
export default {
  methods: {
    onProgress(progress) {
      console.log(progress)
    },
    onSuccess(response) {
      console.log(response)
    },
    onError(error) {
      console.log(error)
    }
  }
}
</script>