图片裁剪+base64转file对象+前端上传OSS

「今天实习的时候遇到了上传图片到阿里OSS的需求。过程波折，学习到了很多，遂有此篇。

需求背景：\color{skyblue}{需求背景：}需求背景：

后台页面上传图片以及简介，前台进行展示。

出现的问题：\color{skyblue}{出现的问题：}出现的问题：

后台上传原图后，前台由于布局的原因进行展示的时候总会拉伸图片或者展示不全

原图：

拉伸后的图片：

最初的解决办法：\color{skyblue}{最初的解决办法：}最初的解决办法：

上传图片后把图片隐藏，再进行图片的长宽获取，算出比例后，判断图片是否合规要求。

这里利用fixed隐藏图片

 <img :src="hiddenImgUrl" alt="" class="hiddenImg" >

.hiddenImg {position: