python前端上传文件与后端接收文件

前端发送字典数据、后端接收

# -*- coding: utf-8 -*-
# 发送字典类型数据
import requests

# # 发送POST请求
# url = ''
# data = {'name': '张三', 'sex': '男', 'age': 25}
# response = requests.post(url, data=data)
# # 输出响应内容
# print(response.json())




# 接收数据
# request.form.to_dict()  个人理解为,把所有的参数(我主要用的json格式),接收转换为字典。
from flask import request, Flask, jsonify
from flask_cors import CORS



# 返回单个支局完成情况
@app.route('/data', methods=["POST"])  # 使用POST请求
def data():
    if request.method == 'POST':
        data = request.form.to_dict()
        print(data)
        return jsonify(data)

前端发送字典数据、后端接收

import requests
url = ""
# header = {"请求头1": "值1"}
file_data = {"poolCode": "N20210107", "id": "275", "tableNameEn": "测试表单反显"}
# 说明
# file = {"前端定义的上传组件的name名称": ("文件名称", open(文件路径, "rb"), "文件类型")}
with open(r"文件url", "rb") as file:
    # 准备文件数据
    files = {'file': ('文件.xlsx', file, 'application/vnd.openxmlformats-officedocument.spreadsheetml.
前端使用`FormData`对象上传多个文件后端是一个常见的操作。`FormData`允许开发者将表单数据、键值对以及二进制数据(如文件)打包成一个对象,然后通过Ajax请求发送到服务器。 以下是前端JavaScript实现步骤: 1. 创建一个`FormData`实例: ```javascript let formData = new FormData(); ``` 2. 循环添加多个文件到`FormData`中: ```javascript const files = document.querySelectorAll('input[type=file]'); // 获取需要上传文件输入元素 files.forEach((fileInput) => { if (fileInput.files.length > 0) { // 检查是否有文件选择 for (let i = 0; i < fileInput.files.length; i++) { formData.append('files[]', fileInput.files[i]); // 使用索引数组来标记多个文件 } } }); ``` 这里假设你有多个`<input type="file">`元素供用户选择文件,并将它们作为一组上传。 3. 使用Ajax发送`FormData`: ```javascript axios.post('/api/upload', formData, { headers: {'Content-Type': 'multipart/form-data'} // 设置正确的Content-Type }).then(response => { console.log('上传成功:', response.data); }).catch(error => { console.error('上传失败:', error); }); ``` 后端接收部分: 后端通常是Node.js(Express),Python(Flask/Django),Java(Spring Boot)等框架,关键在于设置合适的路由和处理函数来解析`multipart/form-data`类型的请求体: ```java @PostMapping("/upload") public ResponseEntity<?> handleFileUpload(@RequestParam("files[]") MultipartFile[] files) throws IOException { // 处理文件,例如保存到服务器 for (MultipartFile file : files) { saveFile(file); } return ResponseEntity.ok().build(); // 返回响应确认收到文件 } ``` 在Node.js中,可以使用multer库处理文件上传: ```javascript const multer = require('multer'); const upload = multer({ dest: 'uploads/' }); app.post('/upload', upload.array('files'), function (req, res, next) { req.files.forEach(file => { // 文件处理逻辑... }); res.send('Files uploaded successfully!'); }); ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Single_minde

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值