通义千问
虽然onUploadProgress主要用于跟踪文件上传的进度，但当你以表单形式（包括Base64编码的字符串数据和其他参数）发送POST请求时，也可以尝试使用它来模拟进度反馈。请注意，由于整个请求体（包括Base64字符串）是作为一个整体发送的，所以这种情况下进度反馈可能不如上传文件那样精确到百分比，但它可以作为一种指示请求正在发送的信号。下面是一个示例代码：
javascript
const axios = require('axios'); // 假设这是你的Base64编码的字符串和其他参数 const base64Data = "your_base64_encoded_string_here"; const otherParams = { param1: "value1", param2: "value2" }; // 将所有数据整合成一个表单形式的请求体 const formData = new FormData(); formData.append("base64Data", base64Data); for (let key in otherParams) { formData.append(key, otherParams[key]); } // 发送POST请求 axios.post('你的后端接口URL', formData, { headers: { 'Content-Type': `multipart/form-data; boundary=${formData._boundary}`, }, onUploadProgress: function(progressEvent) { // 因为整个数据体是一次发送，所以这里不能直接计算准确的百分比。 // 但是，可以使用loaded和total来模拟一个简单的进度反馈。 if (progressEvent.total > 0) { const progressPercentage = Math.round((progressEvent.loaded * 100) / progressEvent.total); console.log(`请求发送进度：${progressPercentage}%`); // 这里可以根据需要更新UI，展示一个大致的进度状态 } }, }) .then(response => { console.log('请求成功', response.data); }) .catch(error => { console.error('请求失败', error); });
请注意，由于整个请求体被视为一个整体发送，因此onUploadProgress事件可能只会触发一次或几次，尤其是当请求体不是特别大时，这可能不足以提供精细的进度反馈。在这种情况下，显示一个旋转的加载图标或者简单的“正在发送”状态可能更加合适。
GPT4o
可以通过 Axios 库发送包含 Base64 数据和其他参数的 POST 请求，并在上传过程中显示进度百分比。以下是一个详细的示例，演示如何实现这一目标。
前端代码
首先，确保你已经安装了 Axios。如果没有安装，可以使用 npm 或 yarn 进行安装：
bash
npm install axios # or yarn add axios
以下是如何使用 Axios 发送包含 Base64 格式字符串数据和其他参数的 POST 请求，并在上传过程中显示进度百分比：
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Base64 Upload with Progress</title> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> </head> <body> <button onclick="uploadData()">Upload Data</button> <div id="progress"></div> <script> function uploadData() { // 模拟一个 Base64 字符串数据 const base64Data = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA"; const otherParams = { param1: "value1", param2: "value2" }; // 创建一个 FormData 对象 const formData = new FormData(); formData.append('file', base64Data); formData.append('param1', otherParams.param1); formData.append('param2', otherParams.param2); // 使用 Axios 发送 POST 请求 axios.post('/upload-base64', formData, { headers: { 'Content-Type': 'multipart/form-data' }, onUploadProgress: function (progressEvent) { let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total); document.getElementById('progress').innerText = `Upload Progress: ${percentCompleted}%`; } }) .then(function (response) { console.log('Data uploaded successfully'); }) .catch(function (error) { console.error('Error uploading data:', error); }); } </script> </body> </html>
后端代码
后端代码会根据你所使用的服务器框架有所不同。以下是 Node.js 和 Express 框架的一个示例，展示了如何处理 Base64 数据和其他参数。
首先，安装所需的包：
bash
npm install express multer
创建一个 server.js 文件，并添加以下代码：
javascript
const express = require('express'); const multer = require('multer'); const bodyParser = require('body-parser'); const app = express(); const port = 3000; const storage = multer.memoryStorage(); const upload = multer({ storage: storage }); app.use(bodyParser.urlencoded({ extended: true })); app.post('/upload-base64', upload.none(), (req, res) => { const base64Data = req.body.file; const param1 = req.body.param1; const param2 = req.body.param2; // 处理 Base64 数据 const base64ContentArray = base64Data.split(','); const mimeType = base64ContentArray[0].match(/:(.*?);/)[1]; const base64String = base64ContentArray[1]; const buffer = Buffer.from(base64String, 'base64'); // 在这里处理buffer，比如保存文件或进一步处理 // 例如，这里将文件保存到磁盘: const fs = require('fs'); const path = require('path'); const filename = 'uploaded_file.png'; // 你可以根据实际情况生成唯一的文件名 fs.writeFile(path.join(__dirname, 'uploads', filename), buffer, err => { if (err) { return res.status(500).send('Error saving file'); } res.send('Base64 data and other parameters processed successfully'); }); console.log(`Received params: param1=${param1}, param2=${param2}`); }); app.listen(port, () => { console.log(`Server running at http://localhost:${port}`); });
确保创建一个 uploads 目录来存储上传的文件：
bash
mkdir uploads
总结
- 前端使用 Axios 的
onUploadProgress选项来获取上传进度，并更新 UI 显示进度百分比。 - 将 Base64 数据和其他参数附加到
FormData对象中，通过 POST 请求发送。 - 后端使用 Node.js 和 Express 处理 Base64 数据和其他参数，并进行文件保存或进一步处理。
这样，你就可以实现上传 Base64 数据和其他参数，并显示百分比进度的功能。根据不同的后端技术栈，后端的实现可能有所不同，但前端的代码基本可以保持不变。
