Flask/Javascript-将图像发布到服务器，然后获取图像作为数据URL读取

我正在制作一个带有图像功能的博客应用程序。你不必一次上传所有的图片。图像可以一次从一个到任何位置输入。当你上传图像时，在点击提交之前，你会得到一个你将要上传的图像预览。点击submit后，文件被保存到磁盘，指向它们的路径被合并成一个字符串，然后保存到SQLite数据库

我现在想要的是能够编辑附在帖子上的图片，并在编辑时预览已经上传的图片和添加到帖子中的图片

下面是我现在拥有的一个简化模型：

index.html

<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<a href='{{ url_for("blog.create") }}'>Create New Post</a>
{% for post in posts %}
  <article>
    <a href='{{ url_for('blog.edit', id=post['id']) }}'>Edit</a>
    {% for images in post['images'].split(post['separator']) %}
      <img src='{{ url_for('static', filename=image) }}'>
    {% endfor %}
  </article>
{% endfor %}
<script src='{{ url_for("static", filename='script.js') }}'></script>

blog.py

import os, string, random
from flask import (
  request, render_template, redirect, url_for, 
)

from . import get_db

def get_random_filename(length, filename):
  letters = string.ascii_letters
  extension = os.path.splitext(filename)[1]
  return ''.join(random.choice(letters) for i in range(length)) + extension

@app.route('/')
def index():
  db = db.execute(
    'SELECT id, images, separator'
    ' FROM post'
    'ORDER BY created DESC'
  ).fetchall()
  return render_template('index.html', posts=posts)

@app.route('/create', methods=('GET', 'POST'))
def create():
  if request.method == 'POST':
    files = request.files.getlist('file[]')
    separator = '&!@%'
    path_to_uploads = os.path.join(os.path.dirname(os.path.realpath(__file__)), app.static_folder, app.config['UPLOAD_FOLDER'])
    db = get_db()

    if files:
      file_paths = []
      for file in files:
        filename = get_random_filename(20, file.filename)
        file.save(os.path.join(path_to_uploads, filename))
        file_paths.append(os.path.join(app.config['UPLOAD_FOLDER'], filename))
      file_list = separator.join(file_paths)
      db.execute(
        'INSERT INTO post (images, separator)'
        ' VALUES (?, ?)',
        (file_list, separator)
      )
      db.commit()
      return redirect(url_for('blog.index'))

  return render_template('create.html')

@app.route('/<int:id>/edit', methods=('GET', 'POST'))
@login_required
def edit(id):
  #???

  return render_template('edit.html', post=post)

提前谢谢。我被困在这个问题上，因为我还没有找到任何有助于我的特定场景的答案

var queue = []

function previewFiles() {
  var files = document.querySelector('input[type=file]').files

  function readAndPreview(file){
    if (/\.(jpe?g|png|gif)$/i.test(file.name)){
      var reader = new FileReader()
      reader.addEventListener('load', function(){
        queue.push(file)
        image = document.createElement('img')
        image.src = this.result
        document.querySelector('div.gallery').appendChild(image)
      }, false)
      
      reader.readAsDataURL(file)
    }
  }


  if(files){
    [].forEach.call(files, readAndPreview)
  }
}

var form = document.querySelector('form')

$(form).submit(function(event){
  var formData = new FormData(this)
  formData.append('file[]', queue)

  $.ajax({
    type: 'POST',
    url: '/',
    data: formData
  })

  event.preventDefault()
})

import os, string, random
from flask import (
  request, render_template, redirect, url_for, 
)

from . import get_db

def get_random_filename(length, filename):
  letters = string.ascii_letters
  extension = os.path.splitext(filename)[1]
  return ''.join(random.choice(letters) for i in range(length)) + extension

@app.route('/')
def index():
  db = db.execute(
    'SELECT id, images, separator'
    ' FROM post'
    'ORDER BY created DESC'
  ).fetchall()
  return render_template('index.html', posts=posts)

@app.route('/create', methods=('GET', 'POST'))
def create():
  if request.method == 'POST':
    files = request.files.getlist('file[]')
    separator = '&!@%'
    path_to_uploads = os.path.join(os.path.dirname(os.path.realpath(__file__)), app.static_folder, app.config['UPLOAD_FOLDER'])
    db = get_db()

    if files:
      file_paths = []
      for file in files:
        filename = get_random_filename(20, file.filename)
        file.save(os.path.join(path_to_uploads, filename))
        file_paths.append(os.path.join(app.config['UPLOAD_FOLDER'], filename))
      file_list = separator.join(file_paths)
      db.execute(
        'INSERT INTO post (images, separator)'
        ' VALUES (?, ?)',
        (file_list, separator)
      )
      db.commit()
      return redirect(url_for('blog.index'))

  return render_template('create.html')

@app.route('/<int:id>/edit', methods=('GET', 'POST'))
@login_required
def edit(id):
  #???

  return render_template('edit.html', post=post)

DROP TABLE IF EXISTS post;

CREATE TABLE post (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  images TEXT UNIQUE,
  separator TEXT
);