悠悠楠杉
网站页面
ajax使用formdata上传文件流，ajax发送formdata
06/10
1. 创建 HTML 表单界面
首先，你需要一个 HTML 表单来允许用户选择文件并输入文章内容：
```html
```
2. 编写 JavaScript 代码来处理 AJAX 请求
接下来，使用 JavaScript 和 FormData 对象来构建和发送 AJAX 请求：
```javascript
function submitArticle() {
var formData = new FormData(document.getElementById('articleForm'));
var xhr = new XMLHttpRequest();
xhr.open('POST', '/your-server-endpoint', true); // 替换为你的服务器端点 URL
xhr.onload = function() {
if (xhr.status === 200) {
console.log('文章上传成功:', xhr.responseText);
} else {
console.error('上传失败:', xhr.statusText);
}
};
xhr.onerror = function() {
console.error('请求失败');
};
xhr.send(formData); // 发送 FormData 对象
}
```
3. 服务器端处理逻辑（示例使用 Node.js 和 Express）
在服务器端，你需要设置一个端点来接收这些数据并处理它们。这里以 Node.js 和 Express 为例：
```javascript
const express = require('express');
const fs = require('fs');
const app = express();
const port = 3000; // 监听端口号，根据需要修改
app.post('/your-server-endpoint', (req, res) => {
const title = req.body.title; // 获取文章标题等字段数据
const keywords = req.body.keywords; // 关键词从客户端 FormData 传输时需要前端解析为数组或其他格式处理后发送或服务器端解析字符串并分词处理。这里假设为简单字符串。
const description = req.body.description; // 描述同样处理。
let content = req.body.content; // 正文内容为纯文本或 Markdown，这里假设是纯文本。若需Markdown格式化，需额外处理。
let file = req.files.fileToUpload; // 获取上传的文件对象，名称是 'fileToUpload' 与前端 FormData 的 key 对应。
let fileContent = ''; // 假设文件内容直接存储到变量中，实际开发中可能需要写入文件系统。此处只做示例。
if (file) { // 检查是否有文件上传。 如果有，读取文件内容。假设是文本文件。对于二进制文件（如图片），需用 Buffer 或 Blob 处理。
fs.readFile(file.path, 'utf8', (err, data) => { // 以文本方式读取文件内容（如果文件不是文本类型，则需使用 Buffer）
if (err) { return res.status(500).send(err); } // 处理错误情况。在实际应用中应返回错误状态码和错误信息。
fileContent = data; // 将文件内容保存到变量中。实际开发中通常将这部分内容保存到数据库或文件系统。此处仅为演示用。 结合上面变量构建 Markdown 格式的文档内容。
// Markdown格式化处理，添加文件内容到正文中（根据需要可调整格式）: 示例添加到末尾作为附件内容说明。实际用途中应考虑更丰富的 Markdown 处理或直接存储为 Markdown 文件。 content += Server listening on port ${port}); }); ```
