TinyMCE & Flask - 圖片上傳

Question

我正在嘗試使用 Flask 在博客應用程序上集成 tinyMce。我在編輯器中正確上傳和顯示圖像，但是當用戶想要閱讀整篇文章時，我的圖像不顯示。

     * Serving Flask app "blog.py"
     * Environment: production
       WARNING: This is a development server. Do not use it in a production deployment.
       Use a production WSGI server instead.
     * Debug mode: off
    [2020-08-31 19:08:56,321] INFO in __init__: Blog site startup.
     * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

    ...

    127.0.0.1 - - [31/Aug/2020 19:09:07] "POST /image-upload HTTP/1.1" 200 -
    Validating Image....[OK]
    /static/user_uploads/img_0992.jpeg
    127.0.0.1 - - [31/Aug/2020 19:09:37] "POST /create-post HTTP/1.1" 302 -
    127.0.0.1 - - [31/Aug/2020 19:09:37] "GET /index HTTP/1.1" 200 -
    127.0.0.1 - - [31/Aug/2020 19:09:37] "GET /jsglue.js HTTP/1.1" 200 -
    127.0.0.1 - - [31/Aug/2020 19:09:40] "GET /post/1 HTTP/1.1" 200 -
    127.0.0.1 - - [31/Aug/2020 19:09:40] "GET /jsglue.js HTTP/1.1" 200 -
    127.0.0.1 - - [31/Aug/2020 19:09:40] "GET /post/static/user_uploads/img_0992.jpeg HTTP/1.1" 404 

TinyMCE 初始化：

tinymce.init({
    selector: 'textarea',
    plugins: [
        'advlist autolink link image imagetools lists charmap print preview hr anchor pagebreak spellchecker',
        'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
        'save table contextmenu directionality template paste textcolor codesample'
    ],
    toolbar: 'insertfile undo redo | styleselect | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist | link image | print preview media fullpage | emoticons',
    images_upload_url: Flask.url_for('blog.image_uploader'),
    images_reuse_filename: false,
    automatic_uploads: true,
});

Flask 查看：

@blog.route('/image-upload', methods=['POST'])
@login_required
def image_uploader():
    """
    Upload post images from tinyMce editor.
    Save image to path.
    returns: json { location: path }
    """

    # Get the file user has uploaded inside the tinymce editor.
    uploaded_file = request.files.get('file')

    if uploaded_file:
        filename = secure_filename(uploaded_file.filename).lower()

        # Validate the contents of the file.  Check the header of the file is infact an image.
        valid_img_ext = validate_img(uploaded_file.stream)

        # Split filename and extension, rename & add correct extension.
        filename = secure_filename(os.path.splitext(filename)[0] + valid_img_ext)

        img_path = os.path.join(current_app.config['IMG_UPLOAD_PATH'], filename)

        # Check if user directory exists, create if nessecary.
        if not os.path.exists(current_app.config['IMG_UPLOAD_PATH']):
            try:
                os.makedirs(current_app.config['IMG_UPLOAD_PATH'])
            except OSError as e:
                if e.errno != errno.EEXIST:
                    raise

        # Save the image.
        uploaded_file.save(img_path)
        location = url_for('static', filename='user_uploads/' + filename)
        print(location)

        # Return image path back to editor
        return jsonify({'location': location})

    abort(Response('404 - Image failed to upload'))


@blog.route('/post/<post_id>')
def post_detail(post_id):
    post = Post.query.get(post_id)
    return render_template('article.html', post=post)

正如您在上面看到的，圖像正確驗證並保存。 然后我嘗試查看文章，我得到一個404 - /post/static/user_uploads/img_0992.jpeg如何停止以/post/為前綴的路徑，所以我只是得到/static/user_uploads/img_0992.jpeg

例如，改變

@blog.route('/post/<post_id>')

到

@blog.route('/<post_id>')

圖像加載正常，但這不是一個可行的解決方案

127.0.0.1 - - [31/Aug/2020 19:45:05] "GET /static/user_uploads/img_0992.jpeg HTTP/1.1" 200 -

此外，如果我打開控制台並將 / 添加到 img src，則圖像會按原樣加載。

<img alt="" height="267" src="static/user_uploads/img_0992.jpeg" width="200">

到

<img alt="" height="267" src="/static/user_uploads/img_0992.jpeg" width="200">

我哪里錯了？

Answer 1

解決了：

需要添加

    relative_urls: false,
    images_upload_base_path: '/static/user_uploads',

到 tinymce.init()

例子：

tinymce.init({
    selector: 'textarea',
    relative_urls: false,
    plugins: [
        'advlist autolink link image imagetools lists charmap print preview hr anchor pagebreak spellchecker',
        'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
        'save table directionality template paste codesample'
    ],
    toolbar: 'insertfile undo redo | styleselect | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist | link image | print preview media fullpage | emoticons',
    images_upload_url: Flask.url_for('blog.image_uploader'),
    images_reuse_filename: false,
    automatic_uploads: true,
    images_upload_base_path: '/static/user_uploads',
});

並從視圖中返回文件名

return jsonify({'location': filename})

Answer 2

當使用“圖像工具”編輯上傳的文件時，它可以防止創建新副本。 它僅在您上傳新文件時創建。

進行以下設置。

tinymce.init({
            paste_data_images: false,
            images_reuse_filename: true,
            automatic_uploads: true,
            images_upload_handler: function (blobInfo, success, failure, progress) {
                                
                var  formData = new FormData();
                formData.append('file', blobInfo.blob(), blobInfo.filename());
                
                $.ajax({
                    type:'POST',
                    url:  'ajax.upload.php',
                    data: formData,
                    dataType: 'json',
                    cache:false,
                    contentType: false,
                    processData: false,
                    success:function(r){
                        if (r.error) {
                            alert("r.error");
                        } else if (r.message) {
                            success(r.message.location);
                        }                        
                    },
                    complete: function (jqXHR,exception) {
                       $('.tox-dialog__busy-spinner').hide();
                    },
                    error: function (jqXHR,exception) {
                        
                    }
                });
                
            }  
  });

PHP 代碼：

 // Yüklenecek dosya adı, yüklenen dosyaların adlarında var ise mevcut ad kullanılır.
    if( $_SESSION['TEMP_UPLOADED_IMAGES'][$handle_normal->file_src_name] === true ){
        
        // Dosya zaten mevcut ise otomatik olarak yeniden adlandırmayı devre dışı bırakır. Bu durumda mevcut dosya isimleri var ise üzerine yazılır.
        $handle_normal->file_overwrite = true;
        
             
        
        // Yüklenecek dosyanın adı mevcut adıyla kullanılır. Yeni adlandırma yapılmaz.
        $random_file_name = $handle_normal->file_src_name_body;
    } else {
        // Yüklenecek dosya rastgele adlandırılır.
        $random_file_name = $vd->randomNumbers(10));
    }

此代碼將在每次文件上傳時運行。 （上傳后）

$_SESSION['TEMP_UPLOADED_IMAGES'][$handle_normal->file_dst_name] = true;