1. Python技术站首页
  2. 其他
  3. Vue

vue vantUI实现文件（图片、文档、视频、音频）上传（多文件）

• Vue

为了实现文件上传，我们需要使用Vue.js和Vant UI框架的一些组件和方法。具体步骤如下：

步骤一：安装所需依赖

首先，在项目目录下安装相应的依赖库。

npm install vant -S # 安装 vant ui 库
npm install vue-awesome-uploader -S # 安装 vue-awesome-uploader 库

步骤二：引入依赖

下一步，我们需要在main.js文件中引入Vant UI和vue-awesome-uploader。

import Vue from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'
import VueAwesomeUploader from 'vue-awesome-uploader'

Vue.use(Vant)
Vue.use(VueAwesomeUploader)

步骤三：创建上传组件

在这一步中，我们需要创建一个由Vant UI按钮触发的文件上传窗口。这个窗口将展示上传的文件列表，并允许用户添加或删除文件。

<template>
  <div>
    <van-button type="primary" @click="handleUploadClick">
      上传文件
    </van-button>
    <van-uploader
      ref="uploader"
      :max-count="5"
      :preview-image="false"
      :multiple="true"
      :name="formData.name"
      :accept="accepts"
      :headers="headers"
      :action="uploadUrl"
      :data="formData"
      @before-read="beforeRead"
      @after-read="afterRead"
      @begin="begin"
      @success="success"
      @fail="fail"
    >
      <template #upload">
        <van-icon name="camera" size="24"/>
      </template>
    </van-uploader>
  </div>
</template>

在上面的代码中，我们设置了上传组件的一些属性。其中，@click="handleUploadClick"指定了用来触发文件上传窗口的按钮，ref="uploader"指定引用名称为uploader，@before-read、@after-read、@begin、@success和@fail都是上传组件的事件，控制着上传过程中的各个阶段。

步骤四：编写上传处理逻辑

下一步，我们需要在上传组件中处理上传文件的逻辑。这个逻辑将在上传组件事件上设置的函数中编写，具体如下。

beforeRead 阶段

在这个阶段，我们需要检查文件大小和文件类型，以确保上传的文件符合规定。

beforeRead(file) {
  const isJPG = file.type.indexOf('image') == 0
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isJPG) {
    this.$toast('上传文件只能是图片格式!')
  }

  if (!isLt2M) {
    this.$toast('上传文件大小不能超过 2MB!')
  }

  return isJPG && isLt2M
}

afterRead 阶段

在这个阶段，我们需要将上传的文件保存到数据中，并更新文件列表。

afterRead(files) {
  this.files = this.files.concat(files)

  if (this.files.length >= this.maxCount) {
    this.$refs.uploader.inputElement.disabled = true
  }
}

begin、success 和 fail 阶段

在这些阶段中，我们需要向服务器发送上传请求，根据上传的结果，做出相应的处理。

begin({ file, fileList }) {
  this.$emit('begin', { file, fileList })
},
success(response, file, fileList) {
  file.url = response.data.url
  file.id = response.data.id

  this.$emit('success', { response, file, fileList })
},
fail(error, file, fileList) {
  this.$emit('fail', { error, file, fileList })
}

步骤五：实现删除功能

最后一步，我们需要为文件上传窗口添加删除单个文件和删除所有文件的功能。

<template>
  <div>
    <van-button type="primary" @click="handleUploadClick">
      上传文件
    </van-button>
    <van-uploader
      ref="uploader"
      :max-count="5"
      :preview-image="false"
      :multiple="true"
      :name="formData.name"
      :accept="accepts"
      :headers="headers"
      :action="uploadUrl"
      :data="formData"
      @before-read="beforeRead"
      @after-read="afterRead"
      @begin="begin"
      @success="success"
      @fail="fail"
    >
      <template #upload">
        <van-icon name="camera" size="24"/>
      </template>
    </van-uploader>
    <van-popup v-model="showDeletePopup" position="bottom" :style="{ height: '160px' }">
      <van-list style="margin-bottom: -10px;">
        <van-list-item @click="deleteFileHandler(2)">删除选中文件</van-list-item>
        <van-list-item @click="deleteFileHandler(1)">删除所有文件</van-list-item>
        <van-list-item @click="() => showDeletePopup = false">取消</van-list-item>
      </van-list>
    </van-popup>
    <van-dialog v-model="showDeleteTip" title="删除确认" :confirm-button-text="'是的，我要删除' + deleteText" :cancel-button-text="cancelText" confirm-button-color="#f00">
      <template #content>
        {{ deleteText }}个文件，确定删除吗？
      </template>
    </van-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: [], // 上传的文件列表
      maxCount: 5, // 最大上传数量
      accepts: '', // 文件类型限制
      headers: {}, // HTTP头部
      formData: {}, // 附带的表单数据
      uploadUrl: '', // 上传的地址
      showDeletePopup: false, // 是否展示删除选中的文件弹窗
      showDeleteTip: false, // 是否展示删除确认对话框
      deleteIndexList: [], // 选中的文件索引列表
    }
  },
  methods: {
    // 处理上传点击事件
    handleUploadClick() {
      this.$refs.uploader.inputElement.click()
    },
    // 处理删除选中的文件事件
    deleteFileHandler(type) {
      if (type === 1) {
        this.showDeleteTip = true
        return
      }
      this.deleteIndexList.forEach((item) => {
        this.files.splice(item, 1)
      })
      this.$refs.uploader.inputElement.disabled = false
      this.showDeletePopup = false
    },
    // 删除所有文件
    deleteAllFiles() {
      this.files = []
      this.$refs.uploader.inputElement.disabled = false
      this.showDeleteTip = false
    },
    // beforeRead
    beforeRead(file) {
      const isJPG = file.type.indexOf('image') == 0
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$toast('上传文件只能是图片格式!')
      }

      if (!isLt2M) {
        this.$toast('上传文件大小不能超过 2MB!')
      }

      return isJPG && isLt2M
    },
    // afterRead
    afterRead(files) {
      this.files = this.files.concat(files)

      if (this.files.length >= this.maxCount) {
        this.$refs.uploader.inputElement.disabled = true
      }
    },
    // begin
    begin({ file, fileList }) {
      this.$emit('begin', { file, fileList })
    },
    // success
    success(response, file, fileList) {
      file.url = response.data.url
      file.id = response.data.id

      this.$emit('success', { response, file, fileList })
    },
    // fail
    fail(error, file, fileList) {
      this.$emit('fail', { error, file, fileList })
    }
  },
  computed: {
    deleteText() {
      return this.deleteIndexList.length
    },
    cancelText() {
      return '取消(' + (this.files.length - this.deleteIndexList.length) + ')'
    }
  }
}
</script>

在上面的代码中，我们已经实现了删除单个文件和删除所有文件的功能。其中，deleteFileHandler函数处理删除操作，deleteAllFiles函数实现删除所有文件操作。

示例说明

示例1：上传单个文件

在这个示例中，我们创建了一个上传单个文件的组件。

<template>
  <div>
    <van-button type="primary" @click="handleUploadClick">
      上传文件
    </van-button>
    <van-uploader
      ref="uploader"
      :max-count="1"
      :name="formData.name"
      :accept="accepts"
      :headers="headers"
      :action="uploadUrl"
      :data="formData"
      @before-read="beforeRead"
      @after-read="afterRead"
      @begin="begin"
      @success="success"
      @fail="fail"
    >
    </van-uploader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      maxCount: 1, // 最大上传数量
      accepts: '', // 文件类型限制
      headers: {}, // HTTP头部
      formData: {}, // 附带的表单数据
      uploadUrl: '', // 上传的地址
      file: {}, // 上传的文件信息
    }
  },
  methods: {
    // 处理上传点击事件
    handleUploadClick() {
      this.$refs.uploader.inputElement.click()
    },
    // beforeRead
    beforeRead(file) {
      const isJPG = file.type.indexOf('image') == 0
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$toast('上传文件只能是图片格式!')
      }

      if (!isLt2M) {
        this.$toast('上传文件大小不能超过 2MB!')
      }

      return isJPG && isLt2M
    },
    // afterRead
    afterRead(files) {
      this.file = files[0]
    },
    // begin
    begin({ file, fileList }) {
      this.$emit('begin', { file, fileList })
    },
    // success
    success(response, file, fileList) {
      file.url = response.data.url
      file.id = response.data.id

      this.$emit('success', { response, file, fileList })
    },
    // fail
    fail(error, file, fileList) {
      this.$emit('fail', { error, file, fileList })
    }
  }
}
</script>

在这里，我们将maxCount设置为1，即只能上传一个文件。在上传之后，我们将文件对象保存到了file变量中。

示例2：上传多个文件

在这个示例中，我们创建了一个上传多个文件的组件。

<template>
  <div>
    <van-button type="primary" @click="handleUploadClick">
      上传文件
    </van-button>
    <van-uploader
      ref="uploader"
      :max-count="5"
      :preview-image="false"
      :multiple="true"
      :name="formData.name"
      :accept="accepts"
      :headers="headers"
      :action="uploadUrl"
      :data="formData"
      @before-read="beforeRead"
      @after-read="afterRead"
      @begin="begin"
      @success="success"
      @fail="fail"
    >
      <template #upload">
        <van-icon name="camera" size="24"/>
      </template>
    </van-uploader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: [], // 上传的文件列表
      maxCount: 5, // 最大上传数量
      accepts: '', // 文件类型限制
      headers: {}, // HTTP头部
      formData: {}, // 附带的表单数据
      uploadUrl: '', // 上传的地址
    }
  },
  methods: {
    // 处理上传点击事件
    handleUploadClick() {
      this.$refs.uploader.inputElement.click()
    },
    // beforeRead
    beforeRead(file) {
      const isJPG = file.type.indexOf('image') == 0
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$toast('上传文件只能是图片格式!')
      }

      if (!isLt2M) {
        this.$toast('上传文件大小不能超过 2MB!')
      }

      return isJPG && isLt2M
    },
    // afterRead
    afterRead(files) {
      this.files = this.files.concat(files)

      if (this.files.length >= this.maxCount) {
        this.$refs.uploader.inputElement.disabled = true
      }
    },
    // begin
    begin({ file, fileList }) {
      this.$emit('begin', { file, fileList })
    },
    // success
    success(response, file, fileList) {
      file.url = response.data.url
      file.id = response.data.id

      this.$emit('success', { response, file, fileList })
    },
    // fail
    fail(error, file, fileList) {
      this.$emit('fail', { error, file, fileList })
    }
  }
}
</script>

在这里，我们将multiple设置为true，即允许上传多个文件。在上传之后，我们将所有上传的文件保存到了files变量中。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue vantUI实现文件（图片、文档、视频、音频）上传（多文件） - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • vuex的数据渲染与修改浅析

    下面为你详细讲解“vuex的数据渲染与修改浅析”的完整攻略。 1. vuex的基本概念 Vuex是Vue.js的状态管理，提供了在单个、简洁和易于管理的store中管理所有应用程序的状态。store实际上就是一个容器，它就像一个全局变量，让我们可以在应用中的任何组件之间共享数据。 2. Vuex的核心概念 Vuex包含四个核心概念：state(状态)、mut…

    Vue 2023年5月28日
    00

  • Vue实现红包雨小游戏的示例代码

    首先我们需要了解什么是Vue.js和红包雨小游戏。 Vue.js是一个流行的JavaScript库，用于构建动态的Web应用程序。它被广泛应用于许多前端开发工程中，具有代码简洁、易于维护、高效等特点。 红包雨小游戏是一种神奇的小游戏，玩家将会在游戏中追逐红包，在一定时间内尝试抢到更多的红包。这种游戏具有趣味性和竞争性，并且可以在不同的设备上进行玩耍，如PC、…

    Vue 2023年5月27日
    00

  • vue里使用create,mounted调用方法的正确姿势说明

    接下来我来详细讲解“Vue中使用created和mounted调用方法的正确方式”。 1. created 和 mounted Vue 组件的生命周期函数可以分为 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。今天我们主要来讲解其中的…

    Vue 2023年5月28日
    00

  • 使用Vite2+Vue3渲染Markdown文档的方法实践

    使用Vite2+Vue3渲染Markdown文档的方法实践，可以按照以下步骤进行： 准备工作 安装Node.js，下载地址：https://nodejs.org/en/download/。 在终端中执行以下命令安装Vite：npm install -g vite。 创建一个新的Vue3项目：npm init vite@latest project-name …

    Vue 2023年5月28日
    00

  • vue配置请求本地json数据的方法

    以下是详细讲解“Vue配置请求本地JSON数据的方法”的攻略。 1. 创建本地JSON文件 首先需要创建一个本地的JSON文件，可以将以下数据保存为data.json文件： { "name": "John", "age": 30, "gender": "male&quo…

    Vue 2023年5月28日
    00

  • vue实现日历表格（element-ui）

    下面我将详细讲解“vue实现日历表格（element-ui）”的完整攻略，包含以下几个部分： 需求分析 技术选型 实现步骤 1. 需求分析 我们需要实现一个日历表格的组件，要求具有以下功能： 能够展示指定月份的日历表格； 支持选择日期，选择的日期会高亮显示； 支持设置已选择日期，已选择的日期会高亮显示； 支持上一个月、下一个月的切换。 2. 技术选型 本文采…

    Vue 2023年5月29日
    00

  • Idea安装Eslint插件提示：Plugin NativeScript was not installed的问题

    如果在Idea中安装Eslint插件时出现了“Plugin NativeScript was not installed”的提示，可能是由于Eslint插件需要依赖NativeScript插件而导致的。以下是解决此问题的完整攻略： 安装NativeScript插件 首先需要安装NativeScript插件。可以通过Idea的插件市场进行安装，也可以在设置中搜…

    Vue 2023年5月28日
    00

  • vue中的导航守卫使用及说明

    导航守卫是Vue提供的一套路由钩子函数，用于在路由变化时进行一些预处理或拦截，实现一些权限控制或页面的跳转。Vue的导航守卫主要有三种类型：全局前置守卫、全局解析守卫和全局后置守卫。下面我们将详细讲解Vue中导航守卫的使用及说明。 全局前置守卫 全局前置守卫是在路由变化前执行的钩子函数，主要用于进行权限控制或重定向等操作。可以通过前置守卫中的next函数来控…

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部