将Ajax转换为Axios

问题描述 投票:0回答:1

我正在尝试显示和下载存储在数据库中的文件,我点击此链接: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);
    });
  };
node.js ajax express axios
1个回答
0
投票

使用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>"); }; 功能,该功能在大多数浏览器中都可用

© www.soinside.com 2019 - 2024. All rights reserved.