使用原生js和axios实现单文件上传（入手难度低）

最新推荐文章于 2024-07-10 14:03:37 发布

junglegle_

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量455

点赞数 2

文章标签： javascript 前端 npm ajax node.js

本文链接：https://blog.csdn.net/junglegle_/article/details/130546883

版权

前端使用的是原生的js，后端使用的是nodejs

准备三方库：

1.axios：用于向后端发送文件

2.exress：用于构建后端服务器

3.multer：用于处理前端发送的formData文件

1.前端：

1）页面代码如下（页面写的比较垃圾，主要是看逻辑）：

注意：这里方便演示，我就直接使用的是axios的cdn链接，如果和我一样想在html里使用axios的话就需要加上下面的一行代码

<style>
    .content {
      width: 400px;
      height: 300px;
      border-radius: 10px;
      margin: 0 auto;
      /* background-color: pink; */
      border: 1px dashed grey;
    }
    .none {
      display: none;
    }
    .btn {
      width: 100px;
      height: 40px;
      border: 0;
      border-radius: 10px;
      color: white;
      background-color: rgb(91, 135, 173);
    }
    .img {
      width: 80px;
      height: 80px;
      border-radius: 5px;
    }
    .remove {
      color: red;
    }
    .grey {
      color: grey;
    }
  </style>
  <body>
    <div class="content&