Axios和Jquery实现文件上传功能

Axios和Jquery均可以实现文件上传功能，下面将分别讲解他们的实现方法。

Axios实现文件上传

Axios是一个基于Promise的HTTP库，可以用于浏览器和Node.js。它可以支持跨域请求，并可以轻松处理文件上传。具体的实现方法如下：

1. 创建表单

在HTML中创建一个表单，用于上传文件。

<form enctype="multipart/form-data">
  <input type="file" name="file" />
  <button type="button" onclick="uploadFile()">上传文件</button>
</form>

2. 编写上传文件的代码

function uploadFile() {
  // 获取表单元素
  const form = document.querySelector("form");

  // 创建formData对象
  const formData = new FormData(form);

  // 发送请求
  axios.post("/upload", formData).then(response => {
    console.log(response.data);
  });
}

在以上代码中，我们先获取到表单元素，然后使用FormData对象创建一个表单数据对象，包含了上传的文件。最后使用axios.post方法发送请求，并将formData对象作为参数传入。

3. 后台处理上传的文件

在服务端编写接口来处理上传的文件，使用multer中间件来处理。

const express = require("express");
const multer = require("multer");

const app = express();
const upload = multer({ dest: "uploads/" });

app.post("/upload", upload.single("file"), (req, res) => {
  console.log(req.file);
  res.json({ message: "上传成功!" });
});

app.listen(3000, () => console.log("Server started on port 3000"));

在以上代码中，我们先引入了multer中间件，创建了一个上传文件的目录uploads。然后使用upload.single()方法来处理上传的文件。在接口处理函数中，req.file对象包含上传文件的信息。最后直接返回一个JSON格式的消息。

Jquery实现文件上传

Jquery是一个JavaScript库，它可以使HTML文档遍历、操作和事件处理变得更加简单。下面是使用Jquery实现文件上传的方法：

1. 创建表单

在HTML中创建一个表单，用于上传文件。

<form enctype="multipart/form-data">
  <input type="file" name="file" />
  <button type="button" onclick="uploadFile()">上传文件</button>
</form>

2. 编写上传文件的代码

在JavaScript中，使用Jquery的ajax方法来实现文件的上传。

function uploadFile() {
  // 获取表单数据
  const formData = new FormData($("form")[0]);

  $.ajax({
    url: "/upload",
    type: "POST",
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    success: function(response) {
      console.log(response);
    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.log(textStatus, errorThrown);
    }
  });
}

在以上代码中，我们首先获取表单数据，然后使用$.ajax方法来发送请求。url参数指定接口地址，type参数指定请求的方法为POST。data参数是FormData对象，cache参数和processData参数都设置为false，表示禁用缓存和JQuery对提交数据的自动转换。

contentType参数设置为false，表示让Jquery在发送请求的时候自动加上正确的Content-Type头信息。（默认情况下，它会把Content-Type设置为application/x-www-form-urlencoded，但是对于文件上传接口，需要设置为multipart/form-data）。最后处理上传成功和失败的回调函数。

3. 后台处理上传的文件

在服务端编写接口来处理上传的文件，使用multer中间件来处理。

const express = require("express");
const multer = require("multer");

const app = express();
const upload = multer({ dest: "uploads/" });

app.post("/upload", upload.single("file"), (req, res) => {
  console.log(req.file);
  res.json({ message: "上传成功!" });
});

app.listen(3000, () => console.log("Server started on port 3000"));

在以上代码中，我们先引入了multer中间件，创建了一个上传文件的目录uploads。然后使用upload.single()方法来处理上传的文件。在接口处理函数中，req.file对象包含上传文件的信息。最后直接返回一个JSON格式的消息。