vant自动上传文件/图片

vant上传图片与elementUI有所不同，没有自动上传功能，所以与后端进行接口对接的时候可以在after-read中将文件进行上传

html页面

<!-- 上传图片 -->

<van-field name="uploadImg" label="图片">

    <template #input>

        <van-uploader

                      :max-count="5"

                      multiple

                      v-model="uploadImg"

                      :max-size="50 * 1024 * 1024"

                      @oversize="onOversize"

                      :before-read="beforeRead"

                      :after-read="afterRead"

                      @delete="deleteFile"

                      accept="image/jpeg,image/jpg,image/png"

                      upload-icon="photo"

                      >

        </van-uploader>

    </template>

</van-field>

max-count:最大上传个数

multiple:是否支持多选

:max-size:文件大小限制

@oversize:文件超出大小后的方法

:before-read:文件读取之前（可以做文件类型等校验）也可以进行文件大小判断

:after-read:文件读取之后（此时可以进行文件上传）

@delete:文件删除时的方法

accept:文件类型

upload-icon:显示的图标

文件超出大小时的方法

onOversize() {

    this.$toast('图片大小不能超过 50Mb')

},

文件读取之前

beforeRead(file) {

    if (file.type !== 'image/jpeg' && file.type !== 'image/jpg' && file.type !== 'image/png') {

        this.$notify({ type: 'danger', message: '请上传 jpg、jpeg、png 格式图片' })

        return false

    }

    return true

},

文件读取之后

一般来说，前端在进行Post请求的时候会根据场景发送不同类型的数据，该Post请求头的Content-Type字段必须声明相应的数据类型，比如说application/x-www-form-urlencoded、application/json、multipart/form-data等，根据实际应用，有时候会需要请求时来手动设置，不过大部分情况下浏览器会根据Body中的数据来自发的设置相应的请求头。

afterRead(file, detail) {

    // 此时可以自行将文件上传至服务器

    console.log(file, detail)

    //发送请求

    let params = new FormData()

    params.append('file', file.file)

    params.append('size', file.file.size)

    api.submit(params)

        .then((res) => {

        this.$message.success('上传图片成功')

    })

        .catch((err) => {

        console.error(err)

    })

},

文件删除后

deleteFile(file, detail) {

    console.log(file,detail)

},

vant自动上传图片/文件的更多相关文章

  1. 利用Spring MVC 上传图片文件

    本文转自:http://amcucn.iteye.com/blog/264457.感谢作者 近日在工作当中,需要用到上传图片的功能,然而自己平时学习的时候只会使用struts的上传功能,但因为项目并没 ...

  2. Typora-yes：typora最舒适的使用-优化主题+图床服务+自动上传图片插件

    转载注明出处:https://www.cnblogs.com/nreg/p/11992678.html,谢谢 开源项目下载:https://github.com/nreg/typora-yes 云盘: ...

  3. MacOS Typora集成SM.SM图床 实现自动上传图片

    MacOS Typora集成SM.SM图床 实现自动上传图片 此为PicGo-Core (Command line) (OpenSource)配置方法 参照官网 https://support.typ ...

  4. php上传图片文件常用的几个方法

    1. 前台 <form class="add-form" method="post" action="/person/save" en ...

  5. 基于log4net的支持动态文件名、按日期和大小自动分割文件的日志组件

    最近处理一个日志功能,用log4net的配置不能完全满足要求,所以在其基础上简单封装了一下,支持以下功能: 1 零配置 内置默认配置,引用dll后不需要添加或修改任何配置文件也可以使用 2 动态指定文 ...

  6. paip.enhes efis 自动获取文件的中文编码

    paip.enhes efis 自动获取文件的中文编码 ##为什么需要自动获取文件的中文编码 提高开发效率,自动获取文件的中文编码  .不需要手动设置编码...轻松的.. ##cpdetector 可 ...

  7. [Ajax] 使用Ajax异步上传图片文件(非Form表单提交)

    通过表单Form提交来上传文件的方式这里就不说了: 下面介绍,通过js中使用ajax异步上传图片文件: 新建一个html页面和一个一般处理程序即可: 涉及思路: //发送2次Ajax请求完成js异步上 ...

  8. Android PRODUCT_COPY_FILES 自动拷贝文件

    /********************************************************************** * Android PRODUCT_COPY_FILES ...

  9. Windows服务器Pyton辅助运维--01.自动Copy文件（文件夹）到远程服务器所在目录

    Windows服务器Pyton辅助运维 01．自动Copy文件(文件夹)到远程服务器所在目录 开发环境: u  Web服务器: Windows Server 2008 R2 SP1 IIS 7.5 u ...

  10. C# 创建文件时，文件夹不存在，如何自动创建文件夹

    c# 创建文件时怎么创建文件夹?strhtml=......StreamWriter sw=new StreamWriter("D:/test/1.aspx",false);sw. ...

随机推荐

  1. Sublime Text3插件管理

    插件安装 package control 安装Sublime Text3 打开Sublime Text3,Ctrl+~ 调出控制台,输入代码安装 package control 代码如下: impor ...

  2. windows ubuntu双系统启动

    开始安装系统 1.安装系统 首先安装windows8和ubuntu12.04,安装先后顺序可以不用管,只是安装到ubuntu的分区时需要注意device for boot loader install ...

  3. myeclipse 8.5最新注册码

    myeclipse 8.5最新注册码(过期时间到2016年) Subscriber:huazai          Subscription Code:uLR8ZC-855550-6156585630 ...

  4. uglifyjs使用

    1.安装Nodejs:去这里下载并安装. 2.打开cmd,运行npm,node应该会有输出东西 3.如果在window上运行Node.js的npm报Error: ENOENT, stat 'C:\Us ...

  5. 第12届北师大校赛热身赛第二场 C. 组合数

    题目链接:http://www.bnuoj.com/bnuoj/contest_show.php?cid=3570#problem/43573 C. 组合数 Time Limit: 1000ms Ca ...

  6. 一、C# 概述

    1.托管执行环境 2.程序集 3.关键字:C#保留字 4.除了C#定义的关键字之外,开发者可以提供他们自己的名称,编程语言将这些名称称为标识符 5.如果关键字包含一个"@"前缀,那 ...

  7. Eclipse最有用的快捷键

    编辑 Ctrl+1 快速修复(最经典的快捷键,就不用多说了,可以解决很多问题,比如import类.try catch包围等) Ctrl+Shift+F 格式化当前代码 Ctrl+Shift+M 添加类 ...

  8. python 3 黑色魔法元类初探

    最近读django源码,发现必须了解元类才能理解一些很神奇的行为. 发现元类实际上是控制class的创建过程.比如类B继承某个看似平淡无奇的类A之后,你在类B中定义的属性或方法可能会遭到彻底改变. 假 ...

  9. Elasticsearch深入搜索之全文搜索及JavaAPI使用

    一.基于词项与基于全文 所有查询会或多或少的执行相关度计算,但不是所有查询都有分析阶段. 和一些特殊的完全不会对文本进行操作的查询(如 bool 或 function_score )不同,文本查询可以 ...

  10. Revit API单位转换类

    用法:txt.Text=UnitConvertC.CovertFromAPI(param.AsDouble());param.Set(UnitConvertC.CovertToAPI(txt.Text ...