指定上传路径的TinyMCE图像上传程序



我想知道是否有任何方法可以在TinyMCE中使用本地文件选择器上传图像,我们可以指定图像上传路径?以前我已经制作了一个本地文件(图像)选择器,但是当我上传它时,图像将以base64编码的图像存储在txt文件中。我想要的是将图像直接保存到我的服务器,并为"img src";指定上传路径。有人知道这个的代码吗?所有的帮助都很感激,非常感谢!

28/8/2021我想根据@Dmitry D.建议的答案更新我当前的代码,我已经将automatic_uploads设置为"true",并指定了习惯于我的本地目录的上传目录,但它仍然返回405 http错误。

目前我使用的是TinyMCE 5.8.2生产包我已经设置了FLASK_ENV = development和FLASK_APP = app

这是我的index.html

<body>
<div class="container">
<div class="row">
<h2>TinyMCE Upload Image with Python Flask</h2>
<form id="posts" name="posts" method="post" action="./static/tinymce/postAcceptor.php">
<textarea name="message" id="message"></textarea><br>
</form>
</div>
</div>
<script src="./static/tinymce/tinymce.min.js"></script>
<script>
tinymce.init({
selector: "textarea#message",
plugins: "code image",
toolbar: 'undo redo image',
image_title: true,
automatic_uploads: true,
images_upload_url: './static/tinymce/postAcceptor.php',
images_upload_credentials: true,
file_picker_types: 'image',
});
</body>

app.py (Flask framework)

from flask import Flask, render_template, jsonify, request
from werkzeug.utils import secure_filename
import os
import urllib.request

app = Flask(__name__)
@app.route('/')
def main():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)

postAcceptor.php

<?php
/***************************************************
* Only these origins are allowed to upload images *
***************************************************/
$accepted_origins = array("http://localhost", "http://127.0.0.1");
/*********************************************
* Change this line to set the upload folder *
*********************************************/
$imageFolder = "./static/uploads/";
if (isset($_SERVER['HTTP_ORIGIN'])) {
// same-origin requests won't set an origin. If the origin is set, it must be valid.
if (in_array($_SERVER['HTTP_ORIGIN'], $accepted_origins)) {
header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
} else {
header("HTTP/1.1 403 Origin Denied");
return;
}
}
// Don't attempt to process the upload on an OPTIONS request
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
header("Access-Control-Allow-Methods: POST, OPTIONS");
return;
}
reset ($_FILES);
$temp = current($_FILES);
if (is_uploaded_file($temp['tmp_name'])){
/*
If your script needs to receive cookies, set images_upload_credentials : true in
the configuration and enable the following two headers.
*/
// header('Access-Control-Allow-Credentials: true');
// header('P3P: CP="There is no P3P policy."');
// Sanitize input
if (preg_match("/([^wsd-_~,;:[]().])|([.]{2,})/", $temp['name'])) {
header("HTTP/1.1 400 Invalid file name.");
return;
}
// Verify extension
if (!in_array(strtolower(pathinfo($temp['name'], PATHINFO_EXTENSION)), array("gif", "jpg", "png"))) {
header("HTTP/1.1 400 Invalid extension.");
return;
}
// Accept upload if there was no origin, or if it is an accepted origin
$filetowrite = $imageFolder . $temp['name'];
move_uploaded_file($temp['tmp_name'], $filetowrite);
// Determine the base URL
$protocol = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on' ? "https://" : "http://";
$baseurl = $protocol . $_SERVER["HTTP_HOST"] . rtrim(dirname($_SERVER['REQUEST_URI']), "/") . "/";
// Respond to the successful upload with JSON.
// Use a location key to specify the path to the saved image resource.
// { location : '/your/uploaded/image/file'}
echo json_encode(array('location' => $baseurl . $filetowrite));
} else {
// Notify editor that the upload failed
header("HTTP/1.1 500 Server Error");
}
?>

我的目录大致是这样的:

ImageUploader/-app.py
-venv
静态
——上传
tinymce
-------- tinymce.min.js
-------- postAcceptor.php
——
- index . html

在我写flask run之后,然后点击图像按钮,上传菜单在那里,我可以从我的本地目录浏览,但是当我试图上传它时,它说"HTTP:错误405"。我试着检查它,在控制台菜单上它发现了一个错误,说&;POST http://localhost:5000/static/tinymce/postAcceptor.php 405 (METHOD NOT ALLOWED)&;

有人知道这是怎么发生的,怎么解决它吗?非常感谢大家!

automatic_uploads选项应该有所帮助。它将自动在服务器上上传图像,并用文件的实际路径替换blob url。下面是PHP上传处理程序的示例,它将上传图像并将其url返回给TinyMCE。

最新更新