javascript - 如何使用 nodejs 将 blob 上传到服务器并做出反应
问题描述
我记录了一个文件。现在我将记录的文件作为 blob 获取,我想将它上传到服务器,但无论何时我提出请求,我都会得到400 bad request
。如果我能得到帮助,我将不胜感激
这是带有生成的blob的记录文件功能
record = () => {
let preview = document.getElementById("preview");
let recording = document.getElementById("recording");
this.setState({ loading: true });
let recordingTimeMS = 2000;
navigator.mediaDevices
.getUserMedia({
video: true,
audio: true,
})
.then((stream) => {
preview.srcObject = stream;
preview.captureStream =
preview.captureStream || preview.mozCaptureStream;
return new Promise((resolve) => (preview.onplaying = resolve));
})
.then(() => this.startRecording(preview.captureStream(), recordingTimeMS))
.then(async (recordedChunks) => {
let recordedBlob = new Blob(recordedChunks, {
type: "video/webm",
});
recording.src = URL.createObjectURL(recordedBlob);
this.sendVideoToAPI(recordedBlob);
})
.catch((err) => console.log(err));
};
这是将其上传到服务器的功能
sendVideoToAPI = async (blob) => {
const formData = new FormData();
formData.append("dataFile", blob);
console.log(blob);
Axios({
method: "post",
url: "http://localhost:8000/upload",
headers: {
"X-Requested-With": "XMLHttpRequest",
"Access-Control-Allow-Origin": "*",
},
data: {
file: formData,
},
})
.then((response) => {
console.log(response);
})
.catch((err) => {
console.log(err);
});
};
这是我的 server.js
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use("/uploads", express.static("uploads"));
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, "uploads");
},
filename: function (req, file, cb) {
cb(
null,
`${file.fieldname}-${Date.now()}${path.extname(file.originalname)}`
);
},
});
var upload = multer({ storage: storage });
app.post("/upload", upload.single("dataFile"), (req, res, next) => {
const file = req.file;
if (!file) {
return res.status(400).send({ message: "Please upload a file." });
}
return res.send({ message: "File uploaded successfully.", file });
});
app.get("/", (req, res) => {
res.send("Giphy Chat Server is running successfully");
});
先感谢您
解决方案
推荐阅读
- idris - 我如何在 Idris 中描述这种可分性?
- asp.net - 文本框控件不能接受不同数据类型的输入
- r - 子集(df,!duplicated(x))做什么?
- javascript - 似乎无法将 if..else 转换为 try..catch
- javascript - 使用 grunt 包含位于不同文件夹中的 js 文件
- c++ - 什么是代表?
- image-processing - 图像处理中一阶和二阶导数的混淆
- angular - 以Angular6的形式选择第一次就可以工作
- regex - 获取括号之间大括号中的所有文本实例
- mysql - libpython3.6-dev、libpython3.6 和 mysqlclient 未安装在 ubuntu 18.04 上