直播平台制作，vue图片上传，重复上传相同路径图片
直播平台制作，vue图片上传，重复上传相同路径图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .box { margin: 30px; border: 1px solid; width: 540px; height: 600px; } .box2 { padding: 10px; border-bottom: 1px solid; } .shangchuan { background-color: aquamarine; border: 1px solid aqua; padding: 10px 20px; } img { width: 100px; height: 100px; margin-right: 10px; margin-bottom: 10px; float: left; display: block; } img:nth-child(5n) { margin-right: 0; } .clearfix { content: ""; display: block; clear: both; } .clearfix::after { zoom: 1; } </style> </head> <body> <div class="box"> <!-- 上传按钮 --> <div class="box2"> <!-- multiple：多图上传 hidden：隐藏 accept:限制上传图片类型 --> <input type="file" id="file" multiple hidden accept="image/*"> <button class="shangchuan">上传图片</button> </div> <!-- 图片显示区 --> <div class="tupian clearfix"> <img src="./src/0.jpeg" alt=""> </div> </div> </body> <script> let file = document.querySelector('#file') let btn = document.querySelector('.shangchuan') let box = document.querySelector('.tupian') // 点击按钮触发input框 btn.onclick = function () { file.click() } // 监听input选的文件 file.onchange = function (e) { // 存储数据和进度条 let fileArr = Array.from(e.target.files) // 图片上传 fileArr.forEach((file, index) => { //异步读取文件内容，结果用data:url的字符串形式表示 let reader = new FileReader(); reader.readAsDataURL(file); // 监听文件读取完成 reader.onload = function (e) { box.innerHTML += (` <img src="${reader.result}" alt=""/> `) } /* 发送数据：FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式， 并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去，本接口和此方法都相当简单直接 let formdata = new FormData() formdata.append('img', item.file) */ }) // 清空路径和图片，以防第二次选择相同数量图片不上传 e.target.value = "" } </script> </html>
以上就是 直播平台制作，vue图片上传，重复上传相同路径图片，更多内容欢迎关注之后的文章
