时间戳

首页 > 解决方案 > 如何在ckeditor 5中将多个表单数据设置为uploadAdapter

nuxt.js - 如何在ckeditor 5中将多个表单数据设置为uploadAdapter

问题描述

我通过 ckeditor upload-adapter 将图像文件发送到服务器，但它正在向服务器发送空数据。

我在 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 方法并尝试发送到服务器，但它只发送一个空表单。

标签： nuxt.jsckeditor5

解决方案

我制作了工作代码：

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.')
    }
}

推荐阅读