关于vue.js:Vue3头像选择器

应用场景：

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);

这样，就实现了对上传接口增加文件流的操作，成果展现：