input上传图片;input上传file;vue上传图片。js读取文件的base64;通过File文件读取base64;

本篇是通过File文件来获取base64的;如果需要 通过文件url获取base64看这篇

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

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

注意文件取值 有的是event.target.files[0] ;有的是event.detail.file ;看自己的控制台输出。
记住是读取这个File格式文件即可
在这里插入图片描述
在这里插入图片描述

<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)console.log('event.target.files[0]==',event.target.files[0])//注意有的是取值 event.target.files[0]  有的是取值 event.detail.fileif (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 文件数据 30行直接打印可以看到文件数据(可以先注释此行看下数据--就是图片文件)   )},}
}
</script><style>
.img_box {/* width: 100px;height: 100px; */
}
.content {padding: 20upx;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/403215.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C#WinForm WebBrowser (二) 实用方法总结

实用方法1&#xff1a;获取状态栏信息 void webBrowser1_StatusTextChanged(object sender, EventArgs e){ label1.Text webBrowser1.StatusText;} 实用方法2&#xff1a;页面跳转后改变地址栏地址//在Navigated事件处理函数中改变地址栏地址是最恰当的&#xff1a;private…

虚拟机找不到/mnt/hgfs挂载目录

如果在安装好 VMware Tools 并在设置里面设定好共享目录之后仍然找不到 /mnt/hgfs 默认挂载目录&#xff0c;那么尝试以下步骤&#xff1a;1. 确认VMware Tools 和共享目录设定已经完成&#xff1a;2. 如果操作结果如上所示&#xff0c;那么表示前提条件准备充足啦&#xff0c;…

pdf上传及预览;file上传pdf文件及预览;vue上传pdf文件及预览;vue-pdf预览pdf文件

需求&#xff1a;上传pdf文件&#xff0c;并点击可以打开预览。使用input的file功能即可完成&#xff0c;预览只需要跳转到pdf的url地址即可。 1.使用iframe直接预览 2.vue-pdf参考 3.vue-pdf报错解决 以下代码可直接复制使用&#xff01;&#xff01;&#xff01;有效的可以点…

JS遍历对象或者数组

From: http://keshion.iteye.com/blog/728122 一.纯js实现 Js代码 <script> var obj {"player_id":"GS001","event_id":"1","destroy":"97%"}; var props ""; for(var p in obj){…

深入了解SEO

为什么要SEO&#xff0c;SEO的作用是什么&#xff1f;SEO&#xff08;Search Engine Optimization&#xff09;是为了让自己的IT产品优先能被搜索引擎找到&#xff0c;通过搜索引擎搜索推荐给网民浏览&#xff08;特点就是精准找到用户群体&#xff09;。正所谓&#xff0c;有用…

el-table表格fixed=“right“后表格错乱;Safari浏览器el-table表格错乱;Safari浏览器样式需改无效;

场景&#xff1a;el-table表格操作列右固定fixed“right”&#xff0c;导致表格错乱。其实是由于某行的字体太多&#xff0c;所导致操作列高度错乱。 至于Safari浏览器样式修改无效的问题&#xff1a;每次修改代码后&#xff0c;Safari浏览器项目刷新无变化&#xff0c;必须每次…

从零开始学习Node.js例子七 发送HTTP客户端请求并显示响应结果

From: http://www.cnblogs.com/EricaMIN1987_IT/p/3654233.html wget.js&#xff1a;发送HTTP客户端请求并显示响应的各种结果 options对象描述了将要发出的请求。 data事件在数据到达时被触发&#xff0c;error事件在发生错误时被触发。 HTTP请求中的数据格式通过MIME协议来声…

el-select 结合 el-checkBox 实现下拉全选+多选功能;el-select下拉框全选功能;

原文链接 el-select选择框也有多选功能&#xff0c;但是没有全选。故需要改造一下&#xff0c;el-select 结合 el-checkBox 实现下拉全选多选功能。 代码如下&#xff0c;可直接复制使用&#xff1a; <!--* Description: el-select 结合 el-checkBox 实现下拉全选多选功能 …

JS类似Java String.format的函数

From: http://chenzenghua.iteye.com/blog/1770791Js代码 String.prototype.format String.prototype.f function () { var s this, i arguments.length; while (i--) { s s.replace(new RegExp(\\{ i \\}, gm), arguments[i]); …

pointer-events: none;属性。pointer-events: none;看得见摸不着,点击穿透。

pointer-events: none;理解&#xff1a;你可以看的到某个元素&#xff0c;但是你无法摸的着&#xff0c;点击不到&#xff0c;点击会穿透触发到下层的元素 display&#xff1a;none; 是你摸不着&#xff0c;但是你也看不见。 最简单的使用场景是&#xff1a;给某个box1盒子设置…

axios上传文件;el-upload上传图片和post接口上传file文件;前端给后端接口上传file文件。通过formData给接口传递file文件

本文使用element-ui的el-upload图片上传功能。上传链接 接口参数&#xff1a; <el-uploadaction"https://jsonplaceholder.typicode.com/posts/"list-type"picture-card":on-success"handleAvatarSuccess":on-preview"handlePictureCar…

2、Eternal框架-svn_有更新!

2019独角兽企业重金招聘Python工程师标准>>> 我在code.google.com上建立了eternal项目。 下载地址为&#xff1a;http://code.google.com/p/eternal-mvc/downloads/list 包含了示例war包和源代码。 转载于:https://my.oschina.net/eternal/blog/100233

前端下载图片、pdf、excel、world文件;前端下载图片和pdf文件;前端a标签下载图片和pdf文件;下载文件名称不生效原因。

参考文章1 参考文章2 以下的下载是&#xff0c;拿到了后端给的下载图片的接口地址url > 方法1&#xff1a;将文本或者JS字符串通过 Blob 转换成二进制下载 优点&#xff1a;可以下载&#xff0c;也可以保存名称。 //文件流参数和图片名称 function downloadTxt(str, filenam…

Redis安装和使用指南

From: http://mwt198668.blog.163.com/blog/static/48803692201132141755962/ Redis安装指南 作者&#xff1a;Red_Ant 时间&#xff1a;2011-04-20 简 介 redis是一个key-value存储系统。和Memcached类似&#xff0c;它支持存储的value类型相对更多&#xff0c;包括string…

员工打卡课后小项目

public class Fm{//员工类public string Id { get; set; }public string Name { get; set; }public int Age { get; set; }public string Gender { get; set; }} public class SI{//打卡类public string Name { get; set; }public DateTime Begin { get; set; }public DateTime…

通过后端接口,预览文件流图片;预览和下载文件流

后端接口返回的是文件流 1.如果是pdf等文件&#xff0c;通过iframe结合文件流&#xff0c;做到文件的下载和预览 // 预览文件openPdf1 () {// 后端下载文件流的地址接口let url G_CGI_PHP.group.documentDownload ?id this.paymentImage1const newWindow window.open()ne…

DatePicker动态设置picker-options 中的disabledDate属性操作;

一、场景&#xff1a; 有两个时间选择器A和B。A的时间任意选&#xff0c;B的时间必须选择A之后的时间。此时就需要给B设置可选时间区间&#xff0c;而且是动态的值&#xff0c;既动态设置picker-options 中的disabledDate。 二、代码片段 html&#xff1a; <el-col :span&…

[转]序列化悍将Protobuf-Net,入门动手实录

最近在研究web api 2&#xff0c;看了一篇文章&#xff0c;讲解如何提升性能的&#xff0c; 在序列化速度的跑分中&#xff0c;Protobuf一骑绝尘&#xff0c;序列化速度快&#xff0c;性能强&#xff0c;体积小&#xff0c;所以打算了解下这个利器 1&#xff1a;安装篇 谷歌官方…

Linux 内核打印级别

printk的打印级别 #define KERN_EMERG "<0>" /* system is unusable */ #define KERN_ALERT "<1>" /* action must be taken immediately */ #define KERN_CRIT "<2>" /* critical conditions */ #define KERN_ERR "…

C# 文件操作详解(三)---------Directory类

前面两篇介绍了File类和FileInfo类&#xff0c;对于文件的操作基本够用&#xff0c;但是后面还会补充一下FileStream相关的操作&#xff0c;例如StreamReader和StreamWriter的内容。本文主要介绍Directory类的使用&#xff0c;让我们一起看一下Directory类为我们提供了哪些操作…