我正在尝试显示和下载存储在数据库中的文件,我点击此链接:https://grokonez.com/node-js/multer/nodejs-express-upload-download-multiparfile-to-mysql-multer-sequelize-jquery-ajax-bootstrap
我已经有后端,但是我需要将Ajax代码转换为Axios,因为我使用axios来发布/获取数据。
我需要转换的内容:
$(document).ready(() => {
var url = window.location;
// GET REQUEST
$("#btnGetFiles").click(event => {
event.preventDefault();
ajaxGet();
});
// DO GET
function ajaxGet() {
$.ajax({
type: "GET",
url: "/api/files/getall",
success: data => {
//clear old data
$("#listFiles").html("");
/*
render list of files
*/
$("#listFiles").append("<ul>");
$.each(data, (index, file) => {
$("#listFiles").append(
"<li><a href=" +
url +
"api/files/" +
file.id +
">" +
file.name +
"</a></li>"
);
});
$("#listFiles").append("</ul>");
},
error: err => {
$("#listFiles").html(err.responseText);
}
});
}
});
我有什么:
handleGetFiles = event => {
axios.get("http://localhost:3000/api/files/getall").then(res => {
console.log("Successfully get files", res);
});
};
我的后端:
app.post("/upload", fileWorker.uploadFile);
app.get("/getall", fileWorker.listAllFiles);
app.get("/:id", fileWorker.downloadFile);
const Upload = require("../models/File")(sequelize, DataTypes);
export const uploadFile = (req, res) => {
const uploadFile = req.files.file;
const fileName = req.files.file.name;
const fileData = {
type: req.files.file.mimetype,
name: req.files.file.name,
data: req.files.file.data
};
// upload file to directory
uploadFile.mv(`./uploads/${fileName}`, function(err) {
if (err) {
return res.status(500).send(err);
}
res.json({
file: `uploads/${fileName}`
});
});
// save file to database
Upload.create(fileData);
};
export const listAllFiles = (req, res) => {
Upload.findAll().then(files => {
res.json(files);
});
};
export const downloadFile = (req, res) => {
Upload.findById(req.params.id).then(file => {
var fileContents = Buffer.from(file.data, "base64");
var readStream = new stream.PassThrough();
readStream.end(fileContents);
res.set("Content-disposition", "attachment; filename=" + file.name);
res.set("Content-Type", file.type);
readStream.pipe(res);
});
};
我很想创建一个循环,像本教程一样显示文件列表。
我只需要用一个按钮列出存储在数据库中的文件,然后单击它们进行下载。
编辑
上传功能:
handleselectedFile = event => {
this.setState({
selectedFile: event.target.files[0]
});
};
handleUpload = event => {
const data = new FormData();
data.append("file", this.state.selectedFile, this.state.selectedFile.name);
axios.post("http://localhost:3000/api/files/upload", data).then(res => {
console.log("Successfully uploaded", res);
});
};
使用async/await
,您可以进行如下操作:
async/await
[此外,您可以简化使用jQuery链语法将元素添加到DOM时的jQuery脚本,但这不是您要提出的目标。另外,您可以使用本机handleGetFiles = async (event) => {
const requestData = await axios.get("http://localhost:3000/api/files/getall");
const files = requestData.data;
$("#listFiles").html("");
$("#listFiles").append("<ul>");
files.forEach((file, index) => {
$("#listFiles").append(
"<li><a href=" +
url +
"api/files/" +
file.id +
">" +
file.name +
"</a></li>"
);
});
$("#listFiles").append("</ul>");
};
功能,该功能在大多数浏览器中都可用