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中显示出来

在提交时，获取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);

这样，就完成了对上传接口添加文件流的操作，效果展示：