crop success, but upload fail (with laravel)

[zhengfen]

trafficstars

solved

edit file upload-2.vue: (at line 828) replace

new Promise(function(resolve, reject) {
				let client = new XMLHttpRequest();
				client.open('POST', url, true);
				client.withCredentials = withCredentials;
				client.onreadystatechange = function() {
					if (this.readyState !== 4) {
						return;
					}
					if (this.status === 200 || this.status === 201) {
						resolve(JSON.parse(this.responseText));
					} else {
						reject(this.status);
					}
				};
				client.upload.addEventListener("progress", uploadProgress, false); //监听进度
				// 设置header
				if (typeof headers == 'object' && headers) {
					Object.keys(headers).forEach((k) => {
						client.setRequestHeader(k, headers[k]);
					})
				}
				client.send(fmData);
			})

to

axios.post(url, fmData)

[zhengfen]

solved by: send cropped image blob with axios axios.post(url, fmData)

[FrenchMajesty]

@zhengfen How did you manage to do that? It seems like we cannot customize the uploading process so the only way to handle the upload ourselves is to do it on the event crop-success. I tried the following:

handleSuccessfulCrop(imgUrl) { 
  const formData = new FormData();
  formData.append("file", imgUrl);

  axios.post("/api/users/profile_photo", formData)
  /// etc.....

}

But it doesn't work. It fails the laravel validations that I have:

• file input must be a file
• file input must be an image.

I tried googling for a function to convert a base64 string to an image (blob) but when I try to parse it I get an error saying

"InvalidCharacterError: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded."

[zhengfen]

edit file upload-2.vue: (at line 828) replace

new Promise(function(resolve, reject) {
				let client = new XMLHttpRequest();
				client.open('POST', url, true);
				client.withCredentials = withCredentials;
				client.onreadystatechange = function() {
					if (this.readyState !== 4) {
						return;
					}
					if (this.status === 200 || this.status === 201) {
						resolve(JSON.parse(this.responseText));
					} else {
						reject(this.status);
					}
				};
				client.upload.addEventListener("progress", uploadProgress, false); //监听进度
				// 设置header
				if (typeof headers == 'object' && headers) {
					Object.keys(headers).forEach((k) => {
						client.setRequestHeader(k, headers[k]);
					})
				}
				client.send(fmData);
			})

to

axios.post(url, fmData)

[liuzhenjie0311]

解决了，谢谢大佬！

[sid3r]

Finally I did it after hours of overthinking it, here's my solution:

First replace the promise in the upload function by this:

axios.post(url, fmData) .then((response)=>{ that.loading = 2; that.$emit('crop-upload-success', response, field, ki); }) .catch((err) => { that.loading = 3; that.hasError = true; that.errorMsg = lang.fail; that.$emit('crop-upload-fail', err, field, ki); })

now you can receive the image as a normal file upload in your controller:

$image = $request->file('avatar'); $path = $request->avatar->store('avatars'); // save your file name $path in bd

Note: make sure you have configured laravel file system correctly