axios04-文件上传

最新推荐文章于 2024-10-27 15:29:16 发布

坤小

最新推荐文章于 2024-10-27 15:29:16 发布

阅读量477

点赞数 1

分类专栏： Web前端开发文章标签： js vue axios 文件上传

本文链接：https://blog.youkuaiyun.com/u013263917/article/details/105400577

版权

Web前端开发专栏收录该内容

23 篇文章

订阅专栏

axios上传文件没有兼容性问题，还是使用以前的FormData
- 原因： FormData会自动帮你设置请求头为：multipart/form-data;

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>添加英雄</title>
</head>

<body>
  <form action=""  id="form">
      <input type="text" name="name" placeholder="请输入英雄姓名"><br>
      <input type="text" name="skill" placeholder="请输入英雄技能"><br>
      <input type="file" name="icon" placeholder="请输入英雄头像"><br>
      <button id="btn">提交</button>
  </form>

  <script src="./axios.js"></script>

  <script>
      /* 
        本小节知识点：axios上传文件（以ajax课程英雄管理器新增英雄为例）
        
        总结： axios上传文件没有兼容性问题，还是使用以前的FormData
        原因： FormData会自动帮你设置请求头为：multipart/form-data;
      */
      btn.onclick = function(e){
          e.preventDefault();
          var fd = new FormData(form);
          axios({
              url:'http://127.0.0.1:4399/hero/add',
              method:'post',
              data: fd,
          }).then(res=>{
              //成功回调
              console.log(res)
          });
      }
  </script>
</body>

</html>