vue3.0 移动端二次封装van-uploader实现上传图片(vant组件库)

2024-10-27 23:42:39

1、前提：业务需求，最多上传6张图片，并可以实现本地预览

2、解决方法：使用vant组件库中的van-uploader实现

3、代码实现

template

  <div class="upload-oss">
   <van-uploader
      :after-read="onRead"
      :before-read="beforeRead"
      :accept="fileType"
      v-model="fileList"
      multiple
      :max-count="maxCount"
      :max-size="maxSize"
      @oversize="onOversize"
    >
    </van-uploader>
  </div>

js实现

import { moment } from '@/common'
const emit = defineEmits(['update:fileList'])

defineProps({
  maxCount: { // 图片张数
    type: Number,
    default: 6
  },
  maxSize: { // 图片大小
    type: Number,
    default: 500 * 1024
  },
  fileType: { // 文件类型
    type: String,
    default: "image/*"
  },
  fileList: { //已上传的文件列表
    type: Array,
    default: (()=>{
      return []
    })
  },
})

// 文件大小超过限制时触发
function onOversize(file){
    console.log("请上传小于10M的图片")
}

// 上传前置处理
function beforeRead (file) {
  if(Array.isArray(file)) {
    file.forEach(item => {
      if (item.type !== 'image/jpeg') {
          console.log("请上传 image 格式图片")
          return false
        }
    })
    if (file.type !== 'image/jpeg') {
		console.log("请上传 image 格式图片")
      return false
    }
  }
  return true
}
async function onRead(file){
  let content = file
  let forms = new FormData()
  // 判断当前上传几张图，一张以上则为数组结构
  if(Array.isArray(content)) {
        content.forEach(item => {
          forms.append("file",item.file)
          forms.append('filePath', `pc/client-${moment().format('YYYY-MM-DD')}/`)
        })
      }else{
        forms.append("file", content.file)
        forms.append('filePath', `pc/client-${moment().format('YYYY-MM-DD')}/`)
  }
  let res = await axios.post({
    、、、、发起后端上传图片接口请求
  })
  if (res) {
    emit("update:fileList", res.data)
  }
}

4、实现的效果图

到此这篇关于vue3.0 移动端二次封装van-uploader上传图片组件的文章就介绍到这了,更多相关vue3.0 van-uploader上传图片组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue vant-ui使用van-uploader实现头像上传功能

效果图: 项目中是使用有赞vant-ui框架实现的头像上传替换功能代码布局结构: <van-row class="sendInfo"> <van-col span="24" class="flex colorf topInfo p20">  <van-uploader :after-read="afterCard" :before-read="be
Vue+Element-UI实现上传图片并压缩

Vue+Element-UI 上传图片并压缩,供大家参考,具体内容如下 1.版本 Vue:2.5.2 Element-UI:2.12.0 可实现图片上传前,自动压缩. Element-UI组件,详情见官网. 2.template部分 <el-form-item label="照片"> <el-upload accept="image/*" class="avatar-uploader" :action="upload
vue 检测用户上传图片宽高的方法

需求: 用户可上传3-6张图片(第 1 2 3 张必须传),上传的图片必须是540 * 330 像素. 第一步,获取上传的图片的宽高. 初始化一个对象数组,宽高均设为0. 如果用户上传的图片没有上限,可以动态修改这个对象数组. data: picArray:[ { width:0, height:0 }, { width:0, height:0 }, { width:0, height:0 }, { width:0, height:0 }, { width:0, height:0 }, { wi
vue axios 表单提交上传图片的实例

项目中用的element 的框架,然后在项目有一个添加数据需求是图片可上传,也可不上传, 然后问题就是element 中的上传控件在没有图片的时候是不会触发提交的,但接口写的是有file的 multipart/form-data 接收模式所有只能自己另个模仿一个表单上传 <input class="file" name="file" type="file" accept="image/png,image/gif,imag
vue实现拖拽或点击上传图片

本文实例为大家分享了vue实现拖拽或点击上传图片的具体代码,供大家参考,具体内容如下一.预览图二.实现点击上传思路:将input的type设置为"file"类型即可上传文件.隐藏该input框,同时点击按钮时,调取该input的点击上传功能.剩下的就是css优化页面了. 拖拽上传思路:通过给拖拽框dropbox绑定拖拽事件,当组件销毁时解绑事件.在拖拽结束,通过event.dataTransfer.files获取上传的文件信息.然后在对文件进行上传服务器操作. 接下来请允许我简单
Vue.js上传图片到阿里云OSS存储的方法示例

如何在VueJS使用阿里云存储上传图片? 什么是OSS呢? 其实按照官网的解释就是->>阿里云对象存储服务(Object Storage Service) 在实际开发中,公司可能会用到OSS随时来存储一些数据,比如像文本.图片.音频和视频等在内的各种非结构化数据文件,恰好,在做项目的时候,刚好用到了OSS存储,对于我这个萌新,从来没用过,那么我们先来看看文档,看看是怎么一回事~看看前端在VueJS的环境下是如何上传OSS的 (1)首先,打开官网-----https://www.aliyun.c
vue3.0 移动端二次封装van-uploader实现上传图片(vant组件库)

1.前提:业务需求,最多上传6张图片,并可以实现本地预览 2.解决方法:使用vant组件库中的van-uploader实现 3.代码实现 template <div class="upload-oss"> <van-uploader :after-read="onRead" :before-read="beforeRead" :accept="fileType" v-model="fileList&
Vue3+Vite+TS实现二次封装element-plus业务组件sfasga

目录 1.结构字符串 2.返回tuple元组 3.访问Dict字典 4.运用库 5.在列表中切片/步进 6.用 ranges 1.结构字符串你会经常需求打印字符串.要是有很多变量,防止下面这样: name = "Raymond" age = 22 born_in = "Oakland, CA" string = "Hello my name is " + name + "and I'm " + str(age) + &quo
jsoneditor二次封装实时预览json编辑器组件react版

目录前言设计思路正文 jsoneditor的使用结合react进行二次封装前言做为一名前端开发人员,掌握vue/react/angular等框架已经是必不可少的技能了,我们都知道,vue或react等MVVM框架提倡组件化开发,这样一方面可以提高组件复用性和可扩展性,另一方面也带来了项目开发的灵活性和可维护,方便多人开发协作.接下来文章将介绍如何使用react,开发一个自定义json编辑器组件.我们这里使用了jsoneditor这个第三方库,官方地址: jsoneditor 通过实现
vue移动端项目vant组件库之tag详解

目录 vant组件库之tag tag标签选中(类型选择,分类选择) vant组件库之tag 直接上代码 <template> <div class="pd50">   <h2>基础用法</h2> <van-tag type=&q
vue elementui二次封装el-table带插槽问题

目录 elementui二次封装el-table带插槽 element-ui table组件的二次封装(插槽的形式) 1.外层table组件封装 2.内层table组件代码 elementui二次封装el-table带插槽子组件table封装 html部分 <template> <div v-loading="loading"> <el-table ref="tableData" :stri
Vue3 企业级组件库框架搭建 pnpm monorepo实战示例

目录引言 1 组件库工程应该具备的功能 2 环境准备 3 搭建 monorepo 项目 3.1 创建项目 3.2 配置 workspace 引言基于 vite3 vue3 的组件库基础工程 vue3-component-library-archetype 和用于快速创建该工程的工具 yyg-cli,但在中大型的企业级项目中,通常会自主搭建这些脚手架或加速器.优雅哥希望每位前端伙伴能知其所以然,故接下来的文章将进入 Vue3 企业级优雅实战系列,整个系列将包括五大部分: 首先会分享如何从 0
vue3.0封装轮播图组件的步骤

接着上一篇文章,熟悉vue3.0的基本用法,和使用一段时间以后,开始准备开发适用于vue3.0使用的pc端的组件库.会陆续跟新一些组件库的写法和注意事项,有兴趣的同学可以多多关注哦,不多bb,开始. 开发一个轮播图组件,适用pc端,(暂无考虑app), 使用于vue3.0 + TS 大致的实现效果是这样: 图片自由轮播,对应圆点图片跳转,左右指示器跳转等.暴露以下options配置: 以上是主要的options,下面展开来说一下具体如何封装. 一:封装思想在vue3.0和vue2.0中封装组件
IOS 使用Block二次封装AFNetworking 3.0详解

IOS 使用Block二次封装AFNetworking 3.0详解现在我们网络请求大都用第三方工具-–AFNetworking: 其中,AFNetworking 3.0 是对 NSURLSession 进行的封装,简化了很多步骤,但是在现实开发中,我们可以将AFNetworking再次封装到一个类中,这样通过传去URL和Parameters 就可以进行网络请求. 具体实现步骤: 前期准备:导入AFNetworking第三方框架 1.新建一个工具类,继承自NSObject: 2.在.h 中宏定义
vue3.0实现插件封装

最近公司有一个新的项目,项目框架是我来负责搭建的,所以果断选择了Vue3.x+ts.vue3.x不同于vue2.x,他们两的插件封装方式完全不一样.由于项目中需要用到自定义提示框,所以想着自己封装一个.vue2.x提供了一个vue.extend的全局方法.那么vue3.x是不是也会提供什么方法呢?果然从vue3.x源码中还是找到了.插件封装的方法,还是分为两步. 1.组件准备按照vue3.x的组件风格封装一个自定义提示框组件.在props属性中定义好.需要传入的数据流. <templa
vue3.0实现下拉菜单的封装

vue3.0出来已经有段时间的了,也与必要开始研究它了! 先看下我们要实现的效果很常见的展开显示菜单项的内容,在vue3.0里面怎么开发,这里样式我们用的是bootstrap的默认样式思路一: <DropDown :title="'退出'" :list="menuLists" /> 思路二: <drop-down :title="'退出'"> <drop-dowm-item>新建文章</drop-do

vue3.0 移动端二次封装van-uploader实现上传图片(vant组件库)

相关推荐

随机推荐