共计 861 个字符，预计需要花费 3 分钟才能阅读完成。
应用场景：
pc 端设置头像：抉择图片后，可自行截取图片，并预览方形和圆形 解决问题：
el-upload 自定义上传；vue3 基于 cropper.js 的裁切性能；axios 发送文件流申请； 实现思路：el-upload 勾销自定义上传性能，将属性 accept=”.jpg, .png” 设置默认显示的文件类型，在 on-change 钩子中获取所选中的图片。在 on-change 事件中，获取返回的 file 类型图片，因为 vue-picture-cropper 组件承受 blob 类型的图片，所以通过 URL.createObjectURL(file 类型图片) 给 cropper 组件赋值，显示图片；
在显示时，会有两个 div 用于显示图片，一个方形，一个圆形，组件会主动将图片的值传递到 div 中显示进去
<div class="square"></div>
<div class="circular"></div>在提交时，获取 cropper 组件显示的图片的 base64 值，通过 base64 值转文件，获取文件流：
function dataURLtoFile (dataURL, fileName) {
let asd = dataURL;
let arr = dataURL.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], fileName, {type: mime})
}将获取到的文件流增加到申请体外面，
let formData = new FormData();
formData.append('file', file);
let resUpload = await axiosApi.postFileApi(`/file/upload/simpleUpload`, formData); 这样，就实现了对上传接口增加文件流的操作，成果展现：
正文完