Angular 图片上传

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]);
    }
}

上传效果: