共计 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); |
这样，就实现了对上传接口增加文件流的操作，成果展现：
正文完
