直播平台制作，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>