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

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

• Vue
yizhihongxing

为了实现文件上传，我们需要使用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开发中遇到的跨域问题及解决方法

    Vue开发中遇到的跨域问题及解决方法 在Vue开发过程中，遇到跨域问题是很常见的情况，这主要是因为前端项目一般运行在本地的服务器中，而请求的API接口却不在同一个服务器中，所以浏览器就会出现跨域问题。本文将为大家讲解跨域问题的产生原因、解决方法以及Vue中应如何解决跨域问题。 什么是跨域问题 所谓跨域问题，指的是浏览器出于安全原因，禁止一个域名下的网页去请求…

    Vue 2023年5月28日
    00

  • Vue.js用法详解

    Vue.js用法详解 简介 Vue.js是一款轻量级Javascript框架，其核心库只关注视图层（View）的渲染和交互，非常适合开发单页应用程序。Vue.js易学易用，且具有良好的灵活性和扩展性，因此备受前端开发者喜爱。 基本使用 以下是Vue.js的基本使用方法： 基本配置 在使用Vue.js前，需要引入Vue.js库： <script src=…

    Vue 2023年5月27日
    00

  • vue的for循环使用方法

    下面是关于Vue的for循环使用方法的详细攻略。 一、Vue的for循环介绍 Vue中的for循环指令叫做v-for，它可以遍历一个数组或一个对象并为每个成员渲染出对应的元素。采用v-for指令可以用于对每个数组和对象进行迭代，并将每个元素渲染到页面中。在渲染每个元素时，我们可以对它们分别进行修改和操作，实现前端页面的数据动态呈现效果。 二、Vue的for循…

    Vue 2023年5月28日
    00

  • Vue组件和Route的生命周期实例详解

    Vue组件和Route的生命周期是Vue.js框架中非常重要的概念。在Vue.js开发中，生命周期指 Vue实例从创建到销毁的整个过程， Vue实例在这个过程中会自动执行一些方法，这些方法被称为生命周期钩子函数，这些函数可以帮助我们在不同的阶段进行操作。 在Vue Router中，我们经常需要用到Route的生命周期。Route的生命周期指的是当一个路由被匹…

    Vue 2023年5月27日
    00

  • 用Vue Demi同时支持Vue2和Vue3的方法

    使用Vue Demi同时支持Vue 2和Vue 3要点如下： 引入 Vue Demi 在使用 Vue 2 的项目中引入 Vue Demi 库，并与 Vue 进行关联，以支持 Vue 3 的生命周期和组合式 API。 import Vue from ‘vue’ import { createComponent, reactive, toRefs } from …

    Vue 2023年5月28日
    00

  • axios封装与传参示例详解

    针对题目“axios封装与传参示例详解”，我将分以下几个部分进行详细讲解： 什么是axios及其用途 axios的基本用法 axios的封装原理及方法 axios传参的详解及示例 1. 什么是axios及其用途 axios是一个基于Promise的HTTP请求客户端，可以用于浏览器和Node.js。它具有以下优点： 可同时在浏览器和Node.js中使用。 能…

    Vue 2023年5月28日
    00

  • vue3+vite+ts使用monaco-editor编辑器的简单步骤

    使用vue3+vite+ts并集成monaco-editor编辑器需要经过以下步骤： 步骤一：创建vue3项目 使用vue-cli可以创建一个基础的vue3项目，安装vue-cli： npm install -g @vue/cli 然后执行以下命令创建vue3项目： vue create my-app –preset vite/vue 其中my-app是项…

    Vue 2023年5月28日
    00

  • Vue组件化开发的必备技能之组件递归

    来讲解一下“Vue组件化开发的必备技能之组件递归”的完整攻略吧。 什么是组件递归 组件递归是一种将组件自身作为其子组件嵌套的方式，实现组件的无限嵌套。在组件递归中，我们使用自定义组件作为自身的子组件，以形成一个递归的树形结构。组件递归可以帮助我们很好地组织和呈现数据。 组件递归的实现 组件递归的实现主要需要以下几个步骤： 定义组件 首先，我们需要定义一个组件…

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