javascript - GrapesJS 中的问题 - 资产管理器处理

Question

我现在正在grapesJS我们的应用程序中实现。我已经浏览了提供的文件和报告的有关资产管理器的一些问题Github，等等。在硬刷新列表消失后，我无法在资产管理器中显示上传的图像列表。

我尝试将文件上传到AmazonS3，上传正常，我得到了它的响应，它也显示在列表中。CORS在这种情况下，由于该问题，我无法编辑图像。

后来，我尝试了base64 encoded图像。使用这种方法，我能够编辑上传的图像。在图像列表中也得到了它。正如我之前所说，图像列表仅在硬刷新之前可用。我认为它来自缓存。

我对一些代码有疑问，你能帮我解决吗？

这是assetManager部分代码：

assetManager: {
    storageType : '',
    storeOnChange : true,
    storeAfterUpload : true,
    embedAsBase64 : true, // Make this false to upload image to AmazonS3
    upload : siteURL+'assets/CONTENT/img', // For temporary storage, Upload endpoint, set `false` to disable upload
    assets : [],
    // headers: {}, // Custom headers to pass with the upload request
    // params: {}, // Custom parameters to pass with the upload request, eg. csrf token
    credentials: 'include', // The credentials setting for the upload request, eg. 'include', 'omit'
    autoAdd : 1, // If true, tries to add automatically uploaded assets.
    dropzone : 0, // Enable an upload dropzone on the entire editor (not document) when dragging files over it
    openAssetsOnDrop : 1, // Open the asset manager once files are been dropped via the dropzone
    multiUpload : true, // Allow uploading multiple files per request. If disabled filename will not have '[]' appended
    showUrlInput: true, // Toggles visiblity of assets url input
    uploadFile: function(e) {
        // Ref: https://blog.webnersolutions.com/adding-image-upload-feature-in-grapesjs-editor/
        var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;
        var formData = new FormData();
        for(var i in files){
            formData.append('file-'+i, files[i]); // Containing all the selected images from local
        }
        $.ajax({
            url: siteURL + 'uploadImage_base64', // Save image as base64 encoded - Its a function
            // url: siteURL + 'uploadImage', // Upload image to AmazonS3 - Its a function
            type: 'POST',
            data: formData,
            contentType: false,
            crossDomain: true,
            dataType: 'json',
            mimeType: "multipart/form-data",
            processData: false,
            success: function(result) {
                var myJSON = [];
                if ((typeof(result['data']) != 'undefined') && (result != 'null')) {
                    $.each(result['data'], function(key, value) {
                        myJSON[key] = value;
                    });
                   console.log(myJSON);
                   // while using base64 encode => 0: {name: "ipsumImage.png", type: "image", src: "data:image/png;base64,iVBORw0KGgAAVwA…AAAAAAAAAAAAAAAD4Pv4B6rBPej6tvioAAAAASUVORK5CYII=", height: 145, width: 348}
                   // while using AmazonS3 => 0: {name: "logo_sigclub.png", type: "image", src: "https://amazonaws.com/assets/CONTENT/img/logo_sigclub.png", status: true, message: "Uploaded successfully", …}
                    editor.AssetManager.add(myJSON); //adding images to asset manager of GrapesJS
                }
            }
        });
    }
}

我有疑问：

• upload : siteURL+'assets/CONTENT/img'，这个图片上传路径还是上传图片的函数？

• 如果我正在使用AmazonS3，我能否获得带有CORS问题的编辑选项？

• 如何在 Asset Manager 中显示上传的图像而不会在以后消失？

标签： javascriptjquerygrapesjs