Как установить несколько форм-данных для загрузки Adapter в ckeditor 5 - PullRequest
Новая
       14

Как установить несколько форм-данных для загрузки Adapter в ckeditor 5

0 голосов
/ 09 апреля 2019

Я отправляю файл изображения на сервер через загрузочный адаптер 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.log(error);
    });
        }
    this.abort = () => {
          console.log('Abort upload.')
    }

}

когда я нажимаю для загрузки изображения, он запускает методы UploadAdapter и пытается отправить на сервер, но отправляет только пустую форму.

1 Ответ

0 голосов
/ 10 июня 2019

Я сделал рабочий код: 

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.log(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.log('Abort upload.')
    }
}
...