Я отправляю файл изображения на сервер через загрузочный адаптер ckeditor, но он отправляет на сервер пустые данные.
Я использую этот пакет в nuxt:
https://github.com/igorxut/vue-ckeditor5
<ckeditor type = "classic" v-model = "form.description" :upload-adapter = "UploadAdapter"></ckeditor>
UploadAdapter: function (loader) {
this.loader = loader
this.upload = () => {
const body = new FormData();
body.append('file', this.loader.file);
return fetch('http://localhost:8000/api/imageUpload', {
headers: {
'Content-Type': "multipart/form-data; charset=utf-8; boundary = " + Math.random().toString().substr(2),
'Accept': 'application/json'
},
body: body,
method: 'post'
})
.then(response => response.json())
.then(downloadUrl => {
return {
default: downloadUrl
}
})
.catch(error => {
console.info(error);
});
}
this.abort = () => {
console.info('Abort upload.')
}
}
когда я нажимаю для загрузки изображения, он запускает методы UploadAdapter и пытается отправить на сервер, но отправляет только пустую форму.
Я сделал рабочий код:
UploadAdapter: function(loader) {
this.loader = loader;
this.upload = () => {
return this.loader.file
.then(uploadedFile => {
return new Promise((resolve, reject) => {
const data = new FormData();
data.append('file', uploadedFile);
axios({
url: 'https://api.gr8peoples.com/api/imageUpload',
method: 'post',
data,
headers: {
'Content-Type': 'multipart/form-data;'
},
withCredentials: false
}).then(response => {
console.info(response.data.success)
if (response.data.success == true) {
resolve({
default: response.data.url
});
} else {
reject(response.data.message);
}
}).catch(response => {
reject('Upload failed');
});
});
});
}
this.abort = () => {
console.info('Abort upload.')
}
}