使用vue-cropper的getCropBlob方法来获取裁剪后的图片blob,然后将其转换为File对象。 javascript export default { // ... 其他组件选项 methods: { handleUploadChange(file, fileList) { if (!file.raw) { return; } const reader = new FileReader(); reader.onload = (e) => { this.option.img ...
| get-file | 获取裁剪完成的 File 数据 | Dome <template> <!-- option是配置,格式是对象,getbase64Data是组件的一个方法获取裁剪完的头像 2.14新增一个获取getblobData的方法 --> 作者:居里栈栈 Wechat:812936565 </template> import H5Cropper from "vue-cropper-h5"; export default { c...
},components: {VueCropper},methods: {//点击获取图片路径getImgUrl(file){console.log(file)this.option.img= file.url; }, handleClick () {//获取截图后的数据this.$refs.cropper.getCropData(data=>{this.resImg= data//关闭模态框this.dialogVisible=false; }) }, realTime (data) {constthat =t...
this.$refs.cropper.getCropBlob((data) => { // let file = new File([data], this.fileName, {type: this.fileName.split('.')[1]}); // data转换为bolb之后是没有name的,后段接收到file之后需要获取到文件的名称; data.name=this.fileName; console.log('data',data); upload(this.actionsUlr...
先问个题外话,cropper截图支持获取base64和blob格式的数据,这两个有什么区别,如果我从后台,通过以下方式获取file的话,适合哪种格式 {代码...} 正题,vue-cropper获取截取的图片的信息后,前台如何上传到后台...
思路:封装一个对话框(Modal),里面包含一个vue-cropper,用于ant-upload上传文件时调用弹出此对话框让用户编辑此图片.裁剪完emit一个事件,然后上传这个编辑后的图片(file) 先是对vue-cropper进行再封装 该组件就对外''暴露 "2个操作 1. 传入图像数据并打开对话框 ...
reader.readAsDataURL(file); }, //上传图片 uploadImg(type) { let _this = this; if (type === 'blob') { //获取截图的blob数据 this.$refs.cropper.getCropBlob(async (data) => { let formData = new FormData(); }); } } } }; ...
reader.readAsDataURL(file) }, //上传图片 uploadImg (type) { let _this = this; if (type === 'blob') { //获取截图的blob数据 this.$refs.cropper.getCropBlob(async (data) => { let formData = new FormData(); formData.append('file',data,"DX.jpg") //调用axios上传 let {data: res}...
{// 该方法 return false 阻止 Upload 组件自动上传并将 file 对象转成 base64 赋值给截图源handleUploadIntercept(file){letreader=newFileReader()reader.readAsDataURL(file)reader.onload=e=>{this.cropperBase64=reader.resultthis.cropperModal=true}returnfalse},// 获取 base64 截图数据并放置到 Avatar 组件...
this.OSS(file) }, // 清空图片列表 clearImg() { this.coverUrl = ""; this.previewImg = '' }, // 关闭上传图片弹框 clearBtn() { this.clearImg(); this.dialogImg = false; }, // 上传 async beforeAvatarUpload(e) { // 获取到第一张图片 ...