input
控件上传图片,div
实现外观
//html <div (click)="upload()" id="imagePreview"> // 设置为自己的图片路径 <img src="assets/increase.svg"> <span id="text">上传图片</span> </div> <input type="file" id="file" accept="image/*" (change)="imagePreview($event)">
// css #imagePreview { width: 80px; height: 80px; border: 1px dotted; padding-bottom: 5px; background-color: white; // 设置背景图片大小、不重复、居中 background-repeat: no-repeat; background-position: center; background-size: 80px 80px; } input { display: none; } span { color: #707070; }
效果:

添加交互效果
// js upload() { document.getElementById('file').click(); // 触发上传 } // 预览图片 imagePreview(event) { const previewImage = document.getElementById('imagePreview'); const uploadFile = document.getElementById('file'); const reader = new FileReader(); reader.onloadend = () => { // 设置图片为背景 previewImage.style.backgroundImage = 'url(' + reader.result + ')'; // 将原“+”号和文本内容隐藏 const image = document.getElementById('image'); image.style.display = 'none'; const text = document.getElementById('text'); text.style.display = 'none'; }; if (uploadFile) { reader.readAsDataURL(event.target.files[0]); } }
上传效果:
