vue
<div class="z_photo">
<img :src="img" alt="" />
<input
class="fil"
type="file"
value=""
accept="image/*"
name="file"
@change="handleFileChange"
/>
</div>
const img = ref(require("../assets/img/home_list_icon2.png"));
// 上传头像
const handleFileChange = (el) => {
let file = el.target.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (e) => {
img.value = e.target.result;
};
};
// base64转图片
const getBase64Image = (src) => {
return new Promise((resolve) => {
const img = new Image();
img.crossOrigin = "";
img.src = src;
img.onload = function () {
const canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext("2d");
ctx?.drawImage(img, 0, 0, img.width, img.height);
const ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
const dataURL = canvas.toDataURL("image/" + ext);
resolve(dataURL);
};
});
};
jq
<input class="shangchuan" class="fil" type="file" value="" accept="image/*" name="file" />
$(function () {
$(".shangchuan").on('change', function (el) {
let file = el.target.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (e) => {
console.log(' e.target.result', e.target.result);
// img.value = e.target.result;
};
});
})
单张上传 限制总数(jq)
css
.pop-list-box {
margin-top: 20px;
width: 100%;
}
.pop-list-tit {
color: rgba(51, 51, 51, 1);
font-size: 16px;
font-weight: 800;
margin-bottom: 10px;
}
/* 上传图片 */
.imgs-box {
width: 100%;
display: flex;
align-items: center;
column-gap: 30px;
}
.list-img {
position: relative;
}
.close1 {
width: 16px;
height: 16px;
margin-left: auto;
display: block;
z-index: 10;
position: absolute;
right: -7px;
top: -9px;
cursor: pointer;
}
.shang {
background: url(../../../assets/images/icons/addimg.png) no-repeat;
background-size: 100%;
}
.z_photo {
width: 90px;
height: 90px;
position: relative;
border: none;
}
.z_photo input[type="file"] {
position: absolute;
top: 0;
left: 0;
display: block;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.z_photo>.img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
}
.shangchuan {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
border: none;
resize: none;
cursor: pointer;
}
<div class="pop-list-box">
<div class="pop-list-tit">
上传图片
</div>
<div class="imgs-box">
<!-- <div class="list-img">
<div class="close">
<img src="../../../assets/img/icon/close (2).png" alt="">
</div>
<div class="z_photo">
<img src="" alt="" class="img" />
</div>
</div> -->
<div class="list-img">
<div class="z_photo shang">
<input accept="image/*" class="shangchuan fil" name="file" type="file" value="" />
</div>
</div>
</div>
</div>
js
//记得引入jq
<script src="../../assets/js/base/jquery-3.2.1.js"></script>
// 图片上传
index = 0; //图片数量
const imageArray = new Map(); //保存的图片数量
// 删除图片
function delate(val) {
console.log("val ", val);
imageArray.delete(val);
index--;
if (index <= 4) {
$(".shangchuan").parent().parent().css("display", "block");
}
}
$(".shangchuan").on("change", function (el) {
index++;
const _this = this;
let file = el.target.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (e) => {
if (index >= 4) {
$(_this).parent().parent().css("display", "none");
}
if (index > 4) {
toast("最多只能上传四张图片", 3000);
return;
} else {
const content =
` <div class="list-img">
<div class="close1" data-index="${index}">
<img src="../../assets/images/icons/close2.png" alt="">
</div>
<div class="z_photo">
<img src="` +
e.target.result +
`" alt="" class="img" />
</div>
</div>`;
$(_this).parent().parent().before(content);
// imageArray.push(e.target.result);
imageArray.set(`${index}`, e.target.result);
$(_this).val("");
$(".close1").unbind("click");
$(".close1").on("click", function () {
console.log($(this).attr("data-index"));
delate($(this).attr("data-index"));
$(this).parent().remove();
});
}
};
});
多图上传
<div class="imgs-box">
<!-- <div class="list-img">
<div class="close">
<img src="../../assets/img/icon/close (2).png" alt="">
</div>
<div class="z_photo">
<img src="" alt="" class="img" />
</div>
</div> -->
<div class="list-img">
<div class="z_photo shang">
<input class="shangchuan" class="fil" type="file" value="" multiple accept="image/*" name="file" />
</div>
</div>
</div>
index = 0; //图片数量
const imageArray = new Map(); //保存的图片数量
// 删除图片
function delate(val) {
imageArray.delete(val);
index--;
if (index <= 4) {
$(".shangchuan").parent().parent().css("display", "block");
}
}
$(".shangchuan").on("change", function (el) {
// 1.单张图片上传
// index++;
// 1.多张图片上传
index = index + el.target.files.length;
const _this = this;
// 2.1 单张图片回显
// let file = el.target.files[0];
// reader.readAsDataURL(file);
// 2.2多张图片回显
// let i = el.target.files.length;
for (let index = 0; index < el.target.files.length; index++) {
//2. 图片回显
var reader = new FileReader();
reader.readAsDataURL(el.target.files[index]);
//多张图片回显
reader.onload = (e) => {
if (index >= 4) {
$(_this).parent().parent().css("display", "none");
}
if (index > 4) {
toast("最多只能上传四张图片", 3000);
return;
} else {
const content =
` <div class="list-img">
<div class="close" data-index="${index}">
<img src="../../assets/img/icon/close (2).png" alt="">
</div>
<div class="z_photo">
<img src="` +
e.target.result +
`" alt="" class="img" />
</div>
</div>`;
$(_this).parent().parent().before(content);
// imageArray.push(e.target.result);
imageArray.set(`${index}`, e.target.result);
$(_this).val("");
$(".close").unbind("click");
$(".close").on("click", function () {
console.log($(this).attr("data-index"));
delate($(this).attr("data-index"));
$(this).parent().remove();
});
}
};
}
});