layui上次图片的前端和后端代码

以下是使用 layui 实现图片上传功能的前端和后端代码示例：

前端代码：

<div class="layui-upload">
  <button type="button" class="layui-btn" id="uploadBtn">上传图片</button>
  <div class="layui-upload-list">
    <img class="layui-upload-img" id="previewImg">
    <p id="previewText"></p>
  </div>
</div>

<script>
layui.use('upload', function(){
  var upload = layui.upload;
  
  //执行实例
  var uploadInst = upload.render({
    elem: '#uploadBtn', //绑定元素
    url: '/upload/', //上传接口
    done: function(res){
      //上传完毕回调
      if(res.code === 0){
        $('#previewImg').attr('src', res.data.url);
        $('#previewText').html('上传成功');
      }else{
        $('#previewText').html('上传失败');
      }
    },
    error: function(){
      //请求异常回调
      $('#previewText').html('上传失败');
    }
  });
});
</script>

后端代码：

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

app = Flask(__name__)

@app.route('/upload/', methods=['POST'])
def upload():
    # 获取上传的文件
    file = request.files['file']
    if not file:
        return jsonify({'code': 1, 'msg': '未上传文件', 'data': {}})

    # 安全获取文件名
    filename = secure_filename(file.filename)

    # 保存文件到本地
    file.save(os.path.join('./uploads', filename))

    # 返回结果
    return jsonify({'code': 0, 'msg': '上传成功', 'data': {'url': f'/uploads/{filename}'}})

if __name__ == '__main__':
    app.run()

其中，前端代码使用 layui.upload 模块实现图片上传功能，后端代码使用 Flask 框架实现接收上传文件和保存文件到本地的功能。