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

最新推荐文章于 2024-10-06 22:53:49 发布

kaiup

最新推荐文章于 2024-10-06 22:53:49 发布

阅读量522

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/kaiup/article/details/116742453

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

话不多说上代码

<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>