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中显示上载的图像而又不会消失？

grapesJS中的问题-资产管理器处理

0 个答案: