input上传图片；input上传file；vue上传图片。

需求：上传图片并获取base，用的是input file功能上传
注意点：input上传相同文件不触发的原因。需要将inputDOM.value = null (不过置空后 29行的打印就看不到 event.target.files 文件数据（可以先注释此行看下数据–就是图片文件） )

以下代码可以直接复制使用！！！有效的点赞

<template><div class="content"><input type="file" class="box-orc-input" @change="uploadPic($event)" /><img class="img_box" :src="imgsrc" alt=""><div>{{imgsrc}}</div></div>
</template><script>
function ie9 () {if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE6.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE7.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE8.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE9.0") {return true} else {return false}
}
export default {data () {return {imgsrc: '',}},methods: {// 通过input上传图片uploadPic (event) {console.log(event)if (event.target.files[0].type != 'image/png' && event.target.files[0].type != 'image/jpg' && event.target.files[0].type != 'image/jpeg') {return this.$message.warning('请选择上传图片，格式支持：.png 或 .jpeg 或 .jpeg')}if (ie9()) {this.$message.warning('iE9及以下版本IE浏览器暂不支持该功能，请升级IE浏览器或者用其他浏览器操作。')retrun}//iE9及以下版本IE浏览器暂不支持该功能，请升级IE浏览器或者用其他浏览器操作。let inputDOM = event.targetlet _this = thisvar reader = new FileReader()reader.readAsDataURL(inputDOM.files[0])reader.onload = function (e) {var base = e.target.resultlet res = base.split(',')console.log(1111, e)console.log('图片的base64码，可以直接赋值给img的src显示图片', base)_this.imgsrc = baseconsole.log()}inputDOM.value = null //将input置空 否则上传相同文件无反应 (不过置空后 29行的打印 就看不到 event.target.files 文件数据（可以先注释此行看下数据--就是图片文件）   )},}
}
</script><style>
.img_box {/* width: 100px;height: 100px; */
}
.content {padding: 20upx;
}
</style>

input上传图片；input上传file；vue上传图片。相关推荐

【vue开发问题-解决方法】（九）使用element upload自定义接口上传文件，input多文件上传
[vue开发问题-解决方法](九)使用element upload自定义接口上传文件,input多文件上传参考文章: (1)[vue开发问题-解决方法](九)使用element upload自定义接 ...
JS任意截图并上传图片，上传视频、上传文件
** JS截图上传图片 ** 在前端WEB开放过程中,经常使用上传图片.上传视频.上传音频以及上传其他文件等,通常都使用到各种上传插件,但是很多插件只是单纯的上传文件,不具备图片截图,即使有也很传统, ...
layui多文件上传讲解_Laravel 使用 layui 文件上传组件批量上传图片
摘要 Laravel 使用 layui 文件上传组件批量上传图片. layui是一款经典国产模块化前端UI框架,首先看看官方的介绍: layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI ...
在ios不同版本下vue2.0浏览上传和拍照上传图片压缩兼容问题
最近在更新迭代之前做的web版项目,在手机端测试上头像和上传附件为图片格式的过程中,发现在ios不同版本的上传图片的功能实现效果不同.比如:ios13版本上传图片就可以正常上传,但是ios2.ios1 ...
前后端上传图片（上传发票并获取发票信息）
前后端上传图片(上传发票并获取发票信息) React+Antd上传图片后端SpringBoot接收图片 SpringBoot后端解析发票信息 React+Antd上传图片上传图片upload组件 ...
chome（谷歌浏览器）上传文件崩溃/上传图片崩溃/打开浏览文件未响应解决方案
chome(谷歌浏览器)上传文件崩溃/上传图片崩溃/打开浏览文件未响应解决方案参考文章: (1)chome(谷歌浏览器)上传文件崩溃/上传图片崩溃/打开浏览文件未响应解决方案 (2)https: ...
vue前端实现上传文件,vue 上传文件
以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传 ...
vue input 框限制上传文件，或者限制上传图片，或者两个都可以上传
1.限制图片 <div><inputstyle="display: none"type="file"id=& ...
vue标签旋转_基于vue下input实现图片上传，压缩，拼接以及旋转的代码详解
本篇文章给大家带来的内容是关于php队列的实现代码介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 作为一名前端工作人员,相信大家在开发系统的时候,经常有遇到需要这么一种需求,就是 ...

input上传图片；input上传file；vue上传图片。

input上传图片；input上传file；vue上传图片。相关推荐

最新文章

热门文章