程序员经验分享-hwhale

使用input上传图片并本地预览

2023-05-16
话不多说上代码
<div id="app">
    <input @change="uploadFile" type="file"></input>
    <img :src="imgSrc" alt="">
</div>
<script>
    var vm = new Vue({
    	el:'#app',
	    data: {
	        imgSrc: '',
	    },
	    methods: {
	    	uploadFile(e) {
		    	let url = '';
			    let file = window.webkitURL.createObjectURL(e.target.files[0])
			    // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
		        if (window.createObjectURL!=undefined) { // basic
		            url = window.createObjectURL(file);
		        } else if (window.URL!=undefined) { // mozilla(firefox)
		            url = window.URL.createObjectURL(file);
		        } else if (window.webkitURL!=undefined) { // webkit or chrome
		            url = window.webkitURL.createObjectURL(file);
		        }
		        this.imgSrc = url;
		    }
	    }
	    
    })
</script>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

input

上传图片并本地预览

使用input上传图片并本地预览 的相关文章

随机推荐

  • 【Linux系统编程（十五）】信号量

    文章目录 信号量1 信号量1 1 信号量的概述1 2 信号量的API1 2 1 初始化信号量1 2 2 信号量减一 xff08 P操作 xff09 1 2 3 尝试对信号量减一1 2 4 信号量加一 xff08 V操作 xff09 1 2

  • 【ESP32_FreeRTOS篇】

    FreeRTOS 是一款 开源免费 的实时操作系统 xff0c 遵循的是 GPLv2 43 的许可协议 这里说 到的开源 xff0c 指的是你可以免费得获取到 FreeRTOS 的源代码 xff0c 且当你的产品使用了 FreeRTOS 且

  • 【FreeRTOS（十四）】StreamBuffer

    文章目录 数据流创建 xStreamBufferCreate发送 xStreamBufferSend接受 xStreamBufferReceive查询流缓冲区 xStreamBufferSpacesAvailable代码示例 数据流 创建

  • 【FreeRTOS（十五）】MessageBuffer

    文章目录 MessageBuffer创建 xMessageBufferCreate发送 xMessageBufferSend接收 xMessageBufferReceive代码示例 MessageBuffer 创建 xMessageBuff

  • 【Git】Git修改 commit 的信息

    Git 修改 commit 的信息 xff1a git log 查看提交日志 xff0c 找到要修改的commit xff1a git rebase i HEAD n 1 切换到需要修改的 commit 中 xff0c n为commit的序

  • PX4飞控之PWM输出控制

    PX4飞控之PWM输出控制 多旋翼电调如好盈XRotor xff0c DJI通用电调等都支持PWM信号来传输控制信号 常用的400Hz电调信号对应周期2500us xff0c 一般使用高电平时间1000us 2000us为有效信号区间 xf

  • 记录docker+github的学习历程

    最早从github上拉代码 xff0c 拉一些纯python的代码 xff0c 然后第二天就发现如果只是为了学习代码 xff0c 直接下载压缩包完事 为什么需要docker 43 github呢 xff1f github上的代码是不同的运行

  • 为什么同样的方法，你做的品牌火不起来？别人却能脱颖而出？

    要想让品牌快速走红 xff0c 必须做好品牌运营 同样进入红海市场 xff0c 江小白 喜茶 丧茶靠品牌运营 xff0c 快速占据一席之地 同样是知名品牌 xff0c 杜蕾斯靠品牌运营 xff0c 牢牢占据用户心智第一位 xff0c 同类目

  • 开发自己的DJI四旋翼无人机（A3飞控Onboard SDK和Mobile SDK介绍）

    大疆作为无人机行业的佼佼者 xff0c 其应用范围从户外旅行 拍照到影视拍摄 xff0c 以及工业运用都有着极高的地位 那么 xff0c 我们如何仅仅使用大疆的飞控来开发出我们自己的无人机呢 xff1f 首先 xff0c 你需要如下的东西

  • PID的曲线

  • ESP-Drone四旋翼无人机控制板上的MPU6050陀螺仪芯片I2C总线测试

    1 摘要 一款新的控制板卡在第一次使用时 xff0c 都需要进行硬件功能的测试 xff0c 以确保所有的硬件都能够正常工作后 xff0c 才可以进入后续的软件编程阶段 xff0c ESP Drone四旋翼无人机的控制板使用了mpu6050陀

  • PHP 设计模式之最全面,最简单的讲解

    1 单例模式 单例模式是指只创建一个资源 对象 数据库链接等 xff0c 防止外部实例 43 判断是否有返回或创建后返回对象 三个要点 xff1a 1 需要一个保存类的唯一实例的静态成员变量 2 构造函数和克隆函数必须声明为私有的 xff0

  • 快速看懂（找到）VUE框架的管理系统代码

    前言 刚入职的且没有啥基础的小白一枚 xff0c 培训期间要求一周时间内在现有demo系统上新增一个模块 xff0c 实现简单的增删改查 so xff0c 这是一个速成的帖子 xff0c 提供一个大致思路 xff08 看代码 xff0b 修

  • 解决k8s.gcr.io问题

    kubeadm安装新版本的Kubernetes过程中 xff0c 需要从k8s grc io仓库中拉取所需镜像文件 xff0c 但由于G F W导致无法正常拉取 xff0c 本文将介绍如何绕过此问题 xff0c 来完成业务的部署 ERROR

  • C++很难吗？到底有多难？

    C 43 43 他爹Bjarne Stroustrup都曾开玩笑说自己已经搞不懂C 43 43 了 xff0c 他也曾多次表达过C 43 43 似乎已经有点太庞大了 其实也不是说C 43 43 语法多么复杂 xff0c 而是C 43 43

  • C++开发需要掌握哪些技能？

    一 语言基础 无论C 43 43 开发还是Java开发 xff0c 对于码农来说 xff0c 最重要的是熟悉编程语言 同理 xff0c 无论从事何种工作 xff0c 首当其冲的就是要掌握好语言基础 C 43 43 是一种博大精深的编程语言

  • 如何成为一个优秀的C++开发工程师？

    目前主流的后端开发语言有很多 xff0c 而C 43 43 开发语言 xff0c 就是其中的一种 xff0c 并且有很多人想要成为C 43 43 开发工程师 那么如何才能成为一名优秀的C 43 43 开发工程师 xff1f 掌握游戏开发之物

  • 深入了解C语言和C++哪个更难？

    众所周知C语言与C 43 43 都是主流的开发语言 xff0c 并且在大多数人看来C语言的学习难度要更难 xff0c 那事实是怎么样的呢 xff1f 接下来小编带你深入了解下C语言和C 43 43 哪个更难 xff1a 深入了解C语言和C

  • ffmpeg分析 之 如何解析mpegts流

    转 xff1a http blog chinaunix net uid 20364597 id 3530284 html ffmpeg分析 之 如何解析mpegts流 2013 03 19 11 02 40 分类 xff1a LINUX 数

  • 使用input上传图片并本地预览

    话不多说上代码 span class token operator lt span div id span class token operator 61 span span class token string 34 app 34 spa

热门标签