使用: vue2, vant2
功能点:
qs1: 前端上传图片并展示
an1: 上传file格式图片转为base64格式
qs2: 要将上传的图片在宽高固定的窗口里显示完整
an2: 把获取的base64的图片链接,赋值到image的src上,然后获取到图片的宽高比例;再与窗口宽高比例对比,选择以高占满还是以宽占满。
#### 具体实现:
....结构:
<div class="upload">
<div class="img-box">
<div class="image-no" @click.stop="openFile" v-if="!image.url">
<div class="tip">
<img src="./../../assets/myopus/icon-upload.png" alt="" />
<div class="text">请上传您的照片</div>
</div>
</div>
<div ref="window" class="image-yes" @click.stop="openFile" v-else>
<div class="img">
<img :style="isWidth? 'width:89.333333vw' : 'height: 56vw'" :src="image.url" alt="" />
</div>
</div>
<input