Vue3头像选择器
使用场景：PC端设置头像：选择图片后，可自行截取图片，预览方形和圆形解决问题：el-upload自定义上传；vue3基于cropper.js的裁剪功能；axios发送文件流请求；实现思路：el-upload取消自定义上传功能，设置属性accept=".jpg,.png"为默认显示的文件类型，在on-changehook中获取选中图片。在on-change事件中，获取返回的文件类型图片，因为vue-picture-cropper组件接受的是blob类型的图片，所以通过URL.createObjectURL(filetypepicture)给cropper组件赋值，显示图片；显示时，会显示图片有两个div，一个正方形，一个圆形，组件会自动把图片的值传给div显示
提交时，获取cropper组件展示的图片的base64值，通过base64值转换文件，得到文件流：functiondataURLtoFile(dataURL,fileName){letasd=数据网址；让arr=dataURL.split(','),mime=arr[0].match(/:(.*?);/)[1],bstr=atob(arr[1]),n=bstr.length,u8arr=newUint8Array(n);while(n--){u8arr[n]=bstr.charCodeAt(n);}returnnewFile([u8arr],fileName,{type:mime})}将获取的文件流添加到请求体中，letformData=newFormData();formData.append('file',file);letresUpload=awaitaxiosApi.postFileApi(`/file/upload/simpleUpload`,formData);这样就完成了在上传界面添加文件流的操作，显示结果：
