图片上传功能使用js和python怎么实现

图片上传功能在前端通常使用JavaScript结合HTML5的File API来处理用户的文件选择，而后端可以用Python配合如Flask、Django等Web框架来接收并存储上传的图片。

前端实现步骤大致如下：
1. 创建HTML表单，允许用户点击“浏览”按钮选择图片文件。

<input type="file" id="image-file" accept=".jpg, .png">

2. 使用JavaScript监听`change`事件，读取选中的文件，并通过AJAX发送到服务器。

document.getElementById('image-file').addEventListener('change', function(e) {
    var file = e.target.files[0];
    // 创建FormData对象，用于发送数据
    var formData = new FormData();
    formData.append('image', file);
    
    // 发送POST请求
    fetch('/upload', {
        method: 'POST',
        body: formData,
        processData: false, // 阻止默认的Content-Type解析
        contentType: false // 防止设置正确的Content-Type头
    }).then(response => response.text());
});

后端（Python）实现步骤：
1. Flask示例：

from flask import Flask, request, send_file
app = Flask(__name__)

@app.route('/upload', methods=['POST'])
def upload_image():
    file = request.files.get('image')
    if file:
        # 将文件保存到服务器指定路径
        filename = save_to_server(file)
        return send_file(filename, as_attachment=True)
    else:
        return "No image uploaded", 400

# 自定义函数保存图片
def save_to_server(file):
    filename = secure_filename(file.filename)
    file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
    return filename

2. Django示例：

from django.http import HttpResponse
from django.core.files.storage import FileSystemStorage

def upload_view(request):
    if request.method == 'POST':
        fs = FileSystemStorage()
        file = request.FILES['image']
        filename = fs.save(file.name, file)
        return HttpResponse('Image uploaded successfully with name {}'.format(filename))