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日

相关文章

  • Vue如何使用Dayjs计算常用日期详解

    下面是使用Vue以及Dayjs计算常用日期的攻略详解： Dayjs是什么？ Dayjs是一个轻量级、没有依赖的JavaScript日期处理库，它具有Moment.js的许多相同的特性，如轻量级、格式化、解析、时间戳、时间段、相对时间等。 如何在 Vue 项目中使用 Dayjs？ 1.安装 dayjs npm install dayjs 2.在 Vue 项目中…

    Vue 2023年5月28日
    00

  • Vue中判断语句与循环语句基础用法及v-if和v-for的注意事项详解

    来讲解一下Vue中判断语句和循环语句的基础用法及其注意事项。 基础用法 Vue中的判断语句 Vue中的判断语句有两种：v-if和v-show。它们的作用都是根据某个条件来控制html元素的显示与隐藏，不同的是v-if是真正的条件渲染，如果条件为false，那么这个元素就不会被渲染在DOM中，而v-show则是简单地控制元素的display属性。 使用v-if…

    Vue 2023年5月27日
    00

  • 详解Vue computed计算属性是什么

    下面我来详细讲解“详解Vue computed计算属性是什么”的完整攻略。 什么是computed计算属性？ 在Vue.js中，computed是一个计算属性，即Vue自带的一种通用的计算方式。它是在模板中进行数据展示和操作的时候，可以使用的一种虚拟数据属性，也可用来监听数据的变化。 计算属性实际上就是对已经存在的数据进行处理，通过已有的数据给出新的计算结果…

    Vue 2023年5月27日
    00

  • Vue中如何优雅的捕获 Promise 异常详解

    在 Vue 中，可以通过 Promise 处理异步操作。当 Promise 中发生异常时，Vue 会抛出一个全局的未捕获异常的错误信息。为了更好的捕获 Promise 异常，我们可以采用一些优雅的方法。 优雅的捕获 Promise 异常 Vue 2.6 后提供了一个全局错误处理器（config.errorHandler），我们可以利用这个处理器进行全局的异常…

    Vue 2023年5月28日
    00

  • vue 判断两个时间插件结束时间必选大于开始时间的代码

    下面我来详细讲解一下vue判断两个时间插件结束时间必选大于开始时间的代码的实现攻略。 1. 准备工作 首先，我们需要在Vue项目中安装并引入moment.js库，用于操作日期时间。 // 安装moment.js npm install moment –save // 在Vue组件中引入moment.js import moment from ‘moment…

    Vue 2023年5月28日
    00

  • vue项目实现多语言切换的思路

    下面是我对于vue项目实现多语言切换的思路的完整攻略： 1. 确定多语言库 在使用Vue实现多语言切换的过程中，首先需要确定可供选择的多语言库。目前常见的多语言库有vue-i18n, vuex-i18n, nuxt-i18n等。这些库可以提供不同的多语言实现方式，例如通过监听语言变化，或者利用vue内置的指令进行控制。在选择多语言库时，可以结合自己的实际项目…

    Vue 2023年5月27日
    00

  • vue-element-admin下载到登录的一些坑

    要讲解“vue-element-admin下载到登录的一些坑”的完整攻略，需要详细说明以下几个步骤： 下载 vue-element-admin Vue-element-admin 是一个基于 Vue.js 和 Element UI 的管理系统，提供了丰富的组件和功能，非常适合开发复杂的 Web 应用。可以通过 Git 下载，也可以直接下载 zip 文件。 安…

    Vue 2023年5月28日
    00

  • 详解Vuex的属性

    下面就详细讲解一下Vuex的属性： Vuex的属性 Vuex是一个专为Vue.js应用程序开发的状态管理模式，它集中管理Vue应用程序中的所有组件的状态。在Vuex中，有几个重要的属性：state、mutations、actions、getters和modules，下面将逐一进行详解。 state state是Vuex中存储响应式数据的地方，唯一的数据源。当…

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