一、逻辑

点击li触发事件chooseImage 即触发input标签事件photoChange

input标签事件photoChange

file返回的是如下变量

模拟上传表单方法

执行上传

二、代码

<li class="scroll-item first-item" @click="chooseImage">
<i class="iconPhoto"></i>
<span class="title">拍照</span>
<input @change="photoChange($event)" type="file" id="upload_file" multiple style="display: none"/>
</li>
       chooseImage(){
document.getElementById('upload_file').click(); //触发input-file文件上传控件 事件photoChange
      },
photoChange(el) {
var file = el.target.files[0];//name: "dangqi1.png" || type: "image/png"
var type = file.type.split('/')[0];
if ( type === 'image' ){
//将图片img转化为base64
var reader = new FileReader();
reader.readAsDataURL(file);
var that = this;
reader.onloadend = function () {
var dataURL = reader.result;
var blob = that.dataURItoBlob(dataURL);
that.upload(blob); //执行上传接口
};
}else{
alert('上传了非图片');
}
},
dataURItoBlob (dataURI) {
// base64 解码
let byteString = window.atob(dataURI.split(',')[1]);
let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
let T = mimeString.split('/')[1];
let ab = new ArrayBuffer(byteString.length);
let ia = new Uint8Array(ab);
for (let i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], {type: mimeString});
},
upload(imgUrl){
var formdata = new FormData();
formdata.append('file',imgUrl);//下面是要传递的参数 axios.post("http://xxx.com/api/file",
formdata,
{headers:{'Content-Type':'multipart/form-data'}}
).then((res)=>{
if(res.data.code === 200){
alert('成功上传!');
this.postimg = res.data.data.url;
}else if(res.data.code === 401){
alert('未登录')
}else if(res.data.code === 403){
alert('未授权')
}else if(res.data.code === 422){
alert('验证失败信息')
}else if(res.data.code === 500){
alert('系统错误')
}
})
},
												

vue 上传图片 input=file的更多相关文章

  1. vue清空input file

    input file是只读的,给form一个id,用form.reset()干掉里面input的值 document.getElementById("uploadForm")&am ...

  2. vue给input file绑定函数获取当前上传的对象

    HTML <input type="file" @change="tirggerFile($event)"> JS(vue-methods) tir ...

  3. input上传图片(file),预览图片的两种方法。blob与base64编码

    上传图片时一般都需要预览,我一般用这两种方法来实现.base64编码可以直接上传到后台,后台解析下,得到的文件就会比较小了,省去了压缩图片这一步了. //获取对象input file 的图片地址,放进 ...

  4. JQuery input file 上传图片

    表单元素file设置隐藏,通过其他元素打开: .imgfile为input file $(".ul").click(function () {return $(".img ...

  5. vue 上传图片视频组件,可拍照选择照片,解决苹果手机拍照旋转问题

    1.创建组件components > uploadImg > index.vue <template> <input type="file" name ...

  6. axios上传图片(及vue上传图片到七牛))

    浏览器上传图片到服务端,我用过两种方法: 1.本地图片转换成base64,然后通过普通的post请求发送到服务端. 操作简单,适合小图,以及如果想兼容低版本的ie没办法用此方法 2.通过form表单提 ...

  7. HTML中上传与读取图片或文件(input file)----在路上(25)

    input file相关知识简例 在此介绍的input file相关知识为: 上传照片及文件,其中包括单次上传.批量上传.删除照片.增加照片.读取图片.对上传的图片或文件的判断,比如限制图片的张数.限 ...

  8. 动态input file多文件上传到后台没反应的解决方法!!!

    其实我也不太清除具体是什么原因,但是后面就可以了!!! 我用的是springMVC 自带的文件上传 1.首先肯定是要有springMVC上传文件的相关配置! 2.前端 这是动态input file上传 ...

  9. h5 input file ajax实现文件上传

    <input type="file" accept="image/*" height="0" class="file_inp ...

随机推荐

  1. 解决windows和ubuntu之间粘贴复制失效

    vmware12中ubuntu15.10 16.10的vmware tools失效,导致不能复制粘贴文件以及自动适应窗口分辨率新安装或异常关机和重新划分分区导致的vmware tools失效,不能复制 ...

  2. linux命令学习(6):ps命令

    Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要动态的显示进程信 ...

  3. ASP.NET MVC与ASP.NET Web Form简单区别

    概论: Asp.net  微软 提供web开发框架或者技术.分Web Form和ASP.NET MVC.下面简单说明各自优缺点及使用场景. Web Form 优点: 1.支持丰富的服务器控件.如:Gr ...

  4. MySQL主从同步技术

    一,先装mysql 准备两台服务器,主服务器是10.0.0.200 副服务器是10.0.0.128主服务器当作mysql的服务端,下载mysql-serveryum install mysql-ser ...

  5. nodejs的koa2框架

    官网文档 cnpm i --save-dev koa2 koa-router koa-body koa-static request npm install --save koa2 const koa ...

  6. Android热门网络框架Volley详解[申明:来源于网络]

    Android热门网络框架Volley详解[申明:来源于网络] 地址:http://www.cnblogs.com/caobotao/p/5071658.html

  7. [No0000120]Python教程3/9-第一个Python程序

    现在,了解了如何启动和退出Python的交互式环境,我们就可以正式开始编写Python代码了. 在写代码之前,请千万不要用“复制”-“粘贴”把代码从页面粘贴到你自己的电脑上.写程序也讲究一个感觉,你需 ...

  8. 两层LSTM的使用

    一层的lstm效果不是很好,使用两层的lstm,代码如下. with graph.as_default(): inputs_ = tf.placeholder(tf.int32, [None, seq ...

  9. 最详细最全的redis配置文件解释

    转载自:http://www.cnblogs.com/zhang-ke/p/5981108.html #redis.conf# Redis configuration file example.# . ...

  10. Lombok安装及使用

    为什么要使用Lombok: 虽然一般的IDE(eclipse,Intellij)都有自动生成代码的功能,如:生成setter,getter,toString,equels,hashcode等.但是如果 ...