为了满足公司项目的需要,添加将图像上传到原始项目的基础页面的功能。 百度总是一波未平一波又起,实现的功能可谓层出不穷,上传图像前需要剪切、压缩、转换为二进制等一系列操作
1、未上传图片时显示的内容
2、上传完成的现实图像内容(可以左右滑动) ) ) )。
一.页面显示代码
div class=' img-uploader ' @ drop=' handle drop ' ref=' uploader ' v-if='! showImg' //提示语句pclass=' img-uploader-placeholder ' v-if='! hasimages'{placeholder}/PDI vv-if=' has images ' class=' img-uploader-preview-list ' divv-for=' (数据) ) ) ) 652索引预览图像divclass=' preview-img ' img 33666 assets/round _ close.SVG ' class=' img-uploader-delete-BTN ' @ click=label input style=' display : none ' : id=' inputid ' ref=' input ' type=' file ' accept=' image/' image /
三、背景要求的图像格式,base64格式的编码被转换为二进制,作为数组传递到背景。 代码如下。
//图像的base64格式编码转换为二进制文件,baseurl :图像base64格式的编码binary system (base URL (letarr=base URL.split ),') ); //1 ) letbstr=atob(arr(1) ) letn=bstr.length letu8arr=new uint8array ) n ) letnameimg=[ ] while (n-) ) uuuuu
数据发送到后台界面后,表示图像上传成功。 上图显示了图像。
大致的想法是这样的,百度可以自己下载相关代码!
这篇文章仅供参考,别喷! 谢谢