syncfusion富文本编辑器vue图片上传

Question

如何将图像加载到我的 vuex 操作中并获取图像的值？

在此输入图片描述在此输入图片描述在此输入图片描述

从“@syncfusion/ej2-vue-richtexteditor”导入{ RichTextEditorComponent、工具栏、图像、链接、HtmlEditor、QuickToolbar }； 从“vuex”导入{mapActions}； 导出默认值{ 成分： { 'ejs-richtexteditor'：RichTextEditorComponent }, 方法： { ...mapActions(['pushPicture']), 处理图像上传（文件）{ 返回新的 Promise((解决, 拒绝) => { this.pushPicture(文件) .then(响应=> { 解决（响应）； }) .catch（错误=> { console.error('上传图片时出错：', error); 拒绝（错误）； }); }); } }, 数据（） { 返回 { 高度：400， 快速工具栏设置：{ 图像： [ '替换'、'对齐'、'标题'、'删除'、'插入链接'、'OpenImageLink'、'-'、 'EditImageLink'、'RemoveImageLink'、'显示'、'AltText'、'尺寸'、 ] }, 工具栏设置：{ items: ['粗体', '斜体', '下划线', '删除线', '字体名称'，'字体大小'，'字体颜色'，'背景颜色'， '小写'，'大写'，'|'， '格式'、'对齐方式'、'有序列表'、'无序列表'、 '突出缩进'、'缩进'、'|'、 'CreateLink'、'图像'、'|'、'ClearFormat'、'打印'、 '源代码'、'全屏'、'|'、'撤消'、'重做' ] }, 插入图像设置：{ saveUrl: this.handleImageUpload, 删除网址：'https://ej2.syncfusion.com/services/api/uploadbox/Remove' } }; }, 提供： { richtexteditor：[工具栏、图像、链接、HtmlEditor、QuickToolbar] } }

Answer 1

可以使用控制器操作将 RichTextEditor 中选定的图像上传到所需的目的地。将方法名称映射到 insertImageSettings 的 saveUrl 属性中，并通过 path 属性提供所需的目标路径。请检查下面所附的代码和示例，

代码片段：

<ejs-richtexteditor
              ref="rteObj"
              :insertImageSettings="insertImageSettings"
              :quickToolbarSettings="quickToolbarSettings">
             </ejs-richtexteditor>


 data: function () {
    return {
      insertImageSettings: {
        saveUrl: 'https://localhost:44342/api/RichTextEditor/SaveFile',

        path: 'https://localhost:44342/images/',
      },
}

服务器端代码：

public void SaveFile(IList<IFormFile> UploadFiles)
{
    try
    {
        foreach (IFormFile file in UploadFiles)
        {
            if (UploadFiles != null)
            {
                string filename = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');
                filename = _webHostEnvironment.WebRootPath + "\\images" + $@"\{filename}";

                // Create a new directory, if it does not exists
                if (!Directory.Exists(_webHostEnvironment.WebRootPath + "\\images"))
                {
                    Directory.CreateDirectory(_webHostEnvironment.WebRootPath + "\\images");
                }

                if (!System.IO.File.Exists(filename))
                {
                    using (FileStream fs = System.IO.File.Create(filename))
                    {
                        file.CopyTo(fs);
                        fs.Flush();
                    }
                    Response.StatusCode = 200;
                }
            }
        }
    }
    catch (Exception)
    {
        Response.StatusCode = 204;
    }
}

Stackblitz-示例：https://stackblitz.com/edit/heqyyk?file=src%2FApp.vue