1)绑定input[type=‘file’]的change事件

<input @change="uploadPhoto($event)" type="file" class="kyc-passin">

2)利用fileReader对象获取图片或者文件的base64 编码

checkImg (size, type) {
let checkSuccess = true
// 只支持这三种格式的图片
const supportTypeList = ['image/png', 'image/jpg', 'image/jpeg']
// 图片大小不超过5M
const limitSize = 1024 * 1024 * 5 // 5M
if (!supportTypeList.includes(type)) {
this.changeErrorLayerShow(true)
this.dialogInfo = dialogDescList.formatError
checkSuccess = false
}
if (size > limitSize) {
this.changeErrorLayerShow(true)
this.dialogInfo = dialogDescList.sizeTooBig
checkSuccess = false
}
return checkSuccess
},
uploadPhoto (e, id) {
const uploadImgFiles = e.target.files
const curImgFile = uploadImgFiles[0]
const checkSuccess = this.checkImg(curImgFile.size, curImgFile.type)
if (checkSuccess) {
let reader = new FileReader()
reader.readAsDataURL(curImgFile)
reader.onload = (e) => {
this.uploadCard[id] = e.target.result // base64
}
}
// 处理连续选择相同文件,第二次选文件不会触发change事件
e.target.value = ''
}

3)再利用ajax将获取到的图片或文件的编码传给后台即可。

input如何上传文件的更多相关文章

  1. input file 上传文件

    面试的时候遇到一个问题,要求手写的方式上传文件. 本来觉得很简单,但是结果怎么也成功不了. 前台: <form ID="form1" action="AcceptF ...

  2. ajax+ashx 完美实现input file上传文件

    1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图:    Firefox效 ...

  3. 使用input file上传文件中onChange事件只触发一次问题

    每次上传文件的时候,都会将当前的文件路径保存至$event.target.value中,当第二次选择文件时,由于两次$event.target.value相同,所以不会触发change事件. 解决方案 ...

  4. 在HTML5的 input:file 上传文件类型控制 遇到的问题

    1.input:file 属性的介绍  先瞅代码吧 <form> <input type="file" name="pic" accept=& ...

  5. input 原生上传文件(type = file)

    1.表单上传文件的步骤: - 1)设置enctype 默认为:enctype="application/x-www-form-urlencoded"(一般不设置) 若要表单中有需要 ...

  6. input file上传文件

    如何使用input[type='file']来上传文件呢? html: //angular<input type="file" (change)="fileChan ...

  7. 巧妙利用label标签实现input file上传文件自定义样式

    提到上传文件,一般会想到用input file属性来实现,简单便捷,一行代码即可    但input file原生提供的默认样式大多情况下都不符合需求,且在不同浏览器上呈现的样式也不尽相同   我们往 ...

  8. input 限制 上传文件类型

    参考:input file控件限制上传文件类型 HTML <input> 标签的 accept 属性 网页上添加一个input file HTML控件: <input id=&quo ...

  9. input file上传文件扩展名限制

    方法一(不推荐使用):用jS获获取扩展名进行验证: <script type="text/javascript" charset="utf-8"> ...

  10. ASP.NET MVC使用input标签上传文件

    有些时间学习了,温习一下ASP.NET MVC了.上传文档是在开发过程中,必须撑握的一个功能.以前上传均是使用第三方控件uploadify来实现,今天使使用VS标准标签input 的type=&quo ...

随机推荐

  1. python 字典 day6

    字典 :键与值用:分开   项与项用,分开 特点:key-value结构‘ key为不可变数据类型,key必须唯一 可以任意存放多个value值 ,可以不唯一,可修改 无序 查询速度极快  且不受di ...

  2. nodejs安装管理工具nvm的安装和使用

    https://segmentfault.com/a/1190000007612011 Windows下载安装程序安装过程中,在 Set Node.js Symlink 这一步设置nodejs程序目录 ...

  3. BZOJ2780(广义后缀自动机,set启发式合并)

    BZOJ2780(广义后缀自动机,set启发式合并) 题面 自己找去 HINT 就是给多个文本串,然后每次查询的时候问你这个串在多少个文本串中出现过.因为多个文本串,那么直接就往广义后缀自动机上思考啊 ...

  4. Tomcat中相关配置详解

    tomcat的相关配置 server.xml <Server port="8005" shutdown="SHUTDOWN"> <!-- 属性 ...

  5. 题解 AT4556 【12/22】

    题目传送门. ___________ 主要思路 我们可以使用\(C++\)语言中的\(string\)字符串来解. 先定义一个字符串\(s\),并输入\(s\). string s; cin>& ...

  6. Spring里面AOP的和IOC的理解

    1.Spring里面AOP的理解:https://www.cnblogs.com/hongwz/p/5764917.html例如日志功能.日志代码往往横向地散布在所有对象层次中,而与它对应的对象的核心 ...

  7. unity ui中使用onmouseover

    unity ui中鼠标移进或者移出的触发方式与2d.3d的不同,2d.3d物体使用的是onmouseover,ui使用的是OnPointerEnter.需要实现以下两个接口. public class ...

  8. php 对象、json 、XML、数组互转

    对象转json $json=json_encode($postObj,JSON_FORCE_OBJECT); json转对象 $obj=json_encode($json); json转数组 $arr ...

  9. layer.open获取弹出层的input框的值

    使用top.$('#txtReason').val();获取值: //不通过 function unAuditData(id) { parent.layer.open({ type: , title: ...

  10. 国内下载Git的连接地址

    Git国内下载: https://github.com/waylau/git-for-win