使用场景:
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);
这样,就完成了对上传接口添加文件流的操作,效果展示:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。