如何在 Flask 中从一个页面的 post 请求中通过 JavaScript 上传图像并将其传输到另一个页面？

Question

我想将图片上传到一个屏幕，然后将该图像带到另一个屏幕，但该图像存储在 JavaScript 变量中。我如何获取该图像并将其发送到另一个可以显示的 HTML 屏幕？

最简单的方法是将图像保存到静态文件夹中，然后将图像从那里加载到 html 页面上。但这似乎不是最优化的方式。

有没有办法直接从post请求中获取图片并从内存发送到页面？

Answer 1

根据多个来源进行大量搜索后，我找到了一种方法，可以将 POST 请求中存储在 JavaScript 中的图片发送到另一个屏幕，以及将图片直接从内存加载到另一个 HTML 页面中。

首先，为了从 JavaScript 发送图片，我专门为此图像创建了一个带有 POST 方法的表单：

 <form action="/CropperScreen" method="POST" id="ImageForm" enctype="multipart/form-data">
            <input name="imageFile" id="imageFile" hidden type="file"/>
            <input hidden type="submit">
    </form>

之后，我得到一个文件输入，负责提交图像并将其存储在变量中：

const fileInput = document.querySelector('#imageFile');

然后我用文件和文件信息填充文件输入：

            // Get your file ready
            const myFileContent = [fileURL];
            const myFileName = 'test.png';
            const myFile = new File(myFileContent, myFileName);

            // Create a data transfer object. Similar to what you get from a `drop` event as `event.dataTransfer`
            const dataTransfer = new DataTransfer();

            // Add your file to the file list of the object
            dataTransfer.items.add(myFile);

            // Save the file list to a new variable
            const fileList = dataTransfer.files;

            // Set your input `files` to the file list
            fileInput.files = fileList;

最后，我找到表单并通过 JavaScript 代码提交：

document.getElementById("ImageForm").requestSubmit();

其中一些工作基于： https://dev.to/code_rabbi/programmatically-setting-file-inputs-in-javascript-2p7i

现在，为了将其显示到另一个 HTML 屏幕上，我首先从表单中指定的路由操作接收它，并将图像存储在变量中：

@app.route('/CropperScreen',methods=['GET','POST'])
def cropper_screen():
    if request.method == "POST":
        imageFile = request.files.get('imageFile', '')

然后创建一个 BYTESIO() 对象，并使用“image”对象中的 save() 函数将图像存储为字节缓冲区：

imageIO = io.BytesIO()
imageFile.save(imageIO)

缓冲区被转换为字节流，转换为ASCII，转换为base64，然后在urllib库上解析。解析后会添加到特殊的 uri 语法中并发送到 HTML 页面：

uri = 'data:image/png;base64,' + urllib.parse.quote(base64.b64encode(imageIO.getvalue()).decode('ascii'))

        return render_template('CropperScreen.html',uri=uri)

最后，在 HTML 页面中，uri 语法用于 img 标签的“src”部分，如下所示：

<img id="image" src="{{ uri }}">

缓冲区和 uri 的想法基于这个答案： https://stackoverflow.com/a/70849754/17870878