如何从 CKEditor-->uploads()-->_initRequest() 传递 <div> 元素（以获取其 id）？

Question

我在视图中有 2 个 CKEditor 字段 ()。

<div id="editor_1">
     @Html.Raw(@Model.Description_1)
</div>

<div id="editor_2">
     @Html.Raw(@Model.Description_2)
</div>

有一段代码将上传的图像传输到控制器：

<script>

class MyUploadAdapter {
    
    upload() {
        return this.loader.file
            .then( file => new Promise( ( resolve, reject ) => {
                this._initRequest();
                this._initListeners( resolve, reject, file );
                this._sendRequest( file );
            } ) );
    }

    _initRequest() {
        const xhr = this.xhr = new XMLHttpRequest();
    }
}

</script>

如何在 _initRequest() 中传递元素的链接并了解用户将图像上传到哪个字段（我需要获取字段 id）？我试图在接收上传图像的控制器（在 Request 类中）中找出答案，但我做不到。

foreach（Request.Form.Files 中的 IFormFile 照片）

谢谢！

Answer 1

您可以创建自定义上传适配器，将文件作为请求的一部分发送到后端。创建适配器实例时，可以通过

editor.sourceElement.getAttribute('id')

获取当前元素的id。

然后，新建一个XMLHttpRequest，并将元素id添加到请求头中，最后通过HTTP请求头发送到后端。 后端通过一个方法从请求头中获取对应的id。 以下是您可以用作参考的示例：

@model Mymodel

<div class="tab-panels">

    <div id="editor_1"></div>
    @Html.Raw(Model?.Description_1)

    <div id="editor_2"></div>
    @Html.Raw(Model?.Description_2)
</div>


<script src=https://cdn.ckeditor.com/ckeditor5/41.0.0/classic/ckeditor.js></script>

<script>

    class MyUploadAdapter {
        constructor(loader, fieldId) {
            
            this.loader = loader;
            this.url = '/Upload/DocUploadImage';
            this.fieldId = fieldId;
        }

        // Starts the upload process.
        upload() {
            return this.loader.file
                .then(file => new Promise((resolve, reject) => {
                    this._initRequest();
                    this._initListeners(resolve, reject, file);
                    this._sendRequest(file);
                }));
        }

        // Aborts the upload process.
        abort() {
            if (this.xhr) {
                this.xhr.abort();
            }
        }
        _initRequest() {
            const xhr = this.xhr = new XMLHttpRequest();
            xhr.open('POST', this.url, true);
            xhr.setRequestHeader('X-FieldId', this.fieldId);
            xhr.responseType = 'json';
           
        }

        _initListeners(resolve, reject, file) {
            const xhr = this.xhr;
            const loader = this.loader;
            const genericErrorText = `Couldn't upload file: ${file.name}.`;

            xhr.addEventListener('error', () => reject(genericErrorText));
            xhr.addEventListener('abort', () => reject());
            xhr.addEventListener('load', () => {
                const response = xhr.response;

                if (!response || response.error) {
                    return reject(response && response.error ? response.error.message : genericErrorText);
                }

                resolve({
                    default: response.url
                });
            });

            if (xhr.upload) {
                xhr.upload.addEventListener('progress', evt => {
                    if (evt.lengthComputable) {
                        loader.uploadTotal = evt.total;
                        loader.uploaded = evt.loaded;
                    }
                });
            }
        }

        // Prepares the data and sends the request.
        _sendRequest(file) {         
            const data = new FormData();
            data.append('upload', file);
            this.xhr.send(data);
        }
    }

    function MyCustomUploadAdapterPlugin(editor) {
        editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
            
            const fieldId = editor.sourceElement.getAttribute('id');
         
            return new MyUploadAdapter(loader, fieldId);
        };
    }

    ClassicEditor.create(document.querySelector('#editor_1'), {
        extraPlugins: [MyCustomUploadAdapterPlugin]
    })
        .catch(error => {
            console.error(error);
        });

    ClassicEditor.create(document.querySelector('#editor_2'), {
        extraPlugins: [MyCustomUploadAdapterPlugin]
    })
        .catch(error => {
            console.error(error);
        });


</script>

接受方式：

public async Task<JsonResult> DocUploadImage()
{
    var fieldId = HttpContext.Request.Headers["X-FieldId"].ToString();


    return Json("OK");
}

当我发送图像时：

我可以在请求头中获取对应的元素id：