应用场景:
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);
这样,就实现了对上传接口增加文件流的操作,成果展现: