使用场景:

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

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


亚洲友人
1 声望0 粉丝

研究研究🍌🍎🍐