赞
踩
<body> <img src='https://img2.baidu.com/it/u=1644683720,376237085&fm=15&fmt=auto' id="img"> <div class="uploader-container"> <a href="javascript:;" class="btn btn-addCard bg-purple font-18"> <i class="icon icon-23 icon-camera"></i> 点击上传 </a> <input type="file" accept="image/*" id="file" onchange="uploadImg(files)" /> </div> <script> function uploadImg(files) { for (let index = 0; index < files.length; index++) { const file = files[index]; img.file = file; var reader = new FileReader(); reader.onload = (function (aImg) { return function (e) { aImg.src = e.target.result; }; })(img); reader.readAsDataURL(file); } } </script> </body>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>js+vue.js上传图片并回显</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script> </head> <body> <div id="app"> <img :src="src" alt="upload-img" id="img"> <div class="uploader-container"> <a href="javascript:;" class="btn btn-addCard bg-purple font-18"> <i class="icon icon-23 icon-camera"></i> 点击上传 </a> <input type="file" accept="image/*" id="file" @change="uploadImg"> </div> <script> new Vue({ el: '#app', data: { fileList: [], src: 'https://img2.baidu.com/it/u=1644683720,376237085&fm=15&fmt=auto' }, methods: { uploadImg(e) { console.log(e); let files = e.target.files console.log('file;', files) for (let index = 0; index < files.length; index++) { const file = files[index]; img.file = file; var reader = new FileReader(); reader.onload = (function (aImg) { return function (e) { aImg.src = e.target.result; }; })(img); reader.readAsDataURL(file); } } }, }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>h5+vue.js+vant-ui</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" /> <!-- 引入 Vue 和 Vant 的 JS 文件 --> <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script> </head> <body> <div id="app"> <img :src='idCardSrc'> <van-uploader :max-count="1" :after-read="handleUpload" :after-read="afterRead"> <a href="javascript:;" class="btn btn-addCard bg-purple font-18"> <i class="icon icon-23 icon-camera"></i> 点击上传 </a> </van-uploader> </div> <script> new Vue({ el: '#app', data: { idCardSrc: '../static/images/addIDCard-bg.png', fileList: [ { url: '../static/images/addIDCard-bg.png' } ], }, methods: { handleUpload(file) { console.log('自定义上传按钮', file) this.idCardSrc = file.content }, }, }) </script> </body> </html>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。