使用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 ...
},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...
HttpServletRequest request List<MultipartFile> files = ((MultipartHttpServletRequest)request).getFiles("file"); 正题,vue-cropper获取截取的图片的信息后,前台如何上传到后台,且后台能用以上方式接收 我封装的axios请求方法部分代码如下 updateUserIcon(){ return request({ url:'user/updateUserIcon', method:'p...
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...
this.OSS(file) }, // 清空图片列表 clearImg() { this.coverUrl = ""; this.previewImg = '' }, // 关闭上传图片弹框 clearBtn() { this.clearImg(); this.dialogImg = false; }, // 上传 async beforeAvatarUpload(e) { // 获取到第一张图片 ...
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}...
form.append("file", logo);//append到form 实例 //封装好上传图片的勾子 //export const uploadFile = (form) => { //return axios.post(upload, form, { // method: 'post', //headers: { 'Content-Type': 'multipart/form-data' }
新增@imgorigoinf 方法,用于获取裁剪前照片的数据(File) 1.1.5 新增@getblobData 方法,用于获取裁剪完成的照片 blob 数据 1.1.4 感谢码友提供的建议,由于很多不在微信浏览器使用,会有浏览器原生的菜单栏挡住底部按钮,现增加 Boolean(ceilbutton),可以自行选择按钮在底部还是顶部,默认底部 1.1.3 同步更新原作者 0....
{// 该方法 return false 阻止 Upload 组件自动上传并将 file 对象转成 base64 赋值给截图源handleUploadIntercept(file){letreader=newFileReader()reader.readAsDataURL(file)reader.onload=e=>{this.cropperBase64=reader.resultthis.cropperModal=true}returnfalse},// 获取 base64 截图数据并放置到 Avatar 组件...