当前位置：首页 > article >正文

详细介绍：使用 Axios 上传图片文件

article 2025/2/4 3:37:30

1. 项目背景和功能概述

2. （index.html完整代码）结构解析

3. JavaScript 部分解析

3.1 事件监听和图片上传

3.2 处理响应和错误

4. 完整流程

5. 总结

6. 适用场景

这篇文章将展示如何通过 Axios 发送 POST 请求来实现图片上传。通过用户选择图片文件后，使用 FormData 构造上传的文件数据，并通过 Axios 将其提交到服务器。服务器返回图片的 URL 后，页面会显示上传的图片。

下面是详细的介绍和完整代码示例。

1. 项目背景和功能概述

功能目的：通过文件选择框，允许用户选择本地图片文件，并将其上传到服务器。上传成功后，返回图片的 URL，页面会自动展示上传的图片。
实现方式：通过 Axios 发送 POST 请求，将图片文件封装在 FormData 对象中，并上传到指定的服务器接口。请求成功后，将返回的图片 URL 用于在页面中显示上传的图片。

2. （index.html完整代码）结构解析

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片上传</title>
  </head>
  <body>
    <!-- 文件选择元素 -->
    <input type="file" class="upload">
    <!-- 图片显示区域 -->
    <img src="" alt="" class="my-img">

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      document.querySelector('.upload').addEventListener('change', e => {
        // 获取图片文件
        const fd = new FormData();
        fd.append('img', e.target.files[0]);

        // 提交到服务器
        axios({
          url: 'http://hmajax.itheima.net/api/uploadimg',  // 服务器接口
          method: 'post',
          data: fd  // 使用 FormData 提交图片文件
        }).then(result => {
          // 处理服务器返回的结果
          console.log(result);  // 打印返回的数据
          const imgUrl = result.data.data.url;  // 获取图片的 URL
          document.querySelector('.my-img').src = imgUrl;  // 设置图片 URL 显示在页面
        }).catch(error => {
          console.error('上传失败:', error);  // 捕获错误并输出错误信息
        });
      });
    </script>
  </body>
</html>

3. JavaScript 部分解析

3.1 事件监听和图片上传

监听文件选择：
- 使用 document.querySelector('.upload').addEventListener('change', e => { ... }) 来监听文件输入框的变化（即用户选择文件后）。
- e.target.files[0] 获取用户选择的文件。
使用 FormData：
- 使用 FormData 对象来封装文件数据。FormData 是一个可以包含文件的特殊数据格式，适用于 multipart/form-data 类型的表单提交。
- fd.append('img', e.target.files[0]) 将选择的文件附加到 FormData 对象中，键名为 'img'。
发送 Axios 请求：
- 使用 axios() 方法发送 POST 请求，将 FormData 对象作为 data 传递。
- 请求 URL 为 'http://hmajax.itheima.net/api/uploadimg'，假设这是一个可处理图片上传的服务器接口。

3.2 处理响应和错误

成功回调：
- 当上传成功时，axios 会返回一个结果对象，包含图片的 URL（在 result.data.data.url 中）。
- 将获取到的图片 URL 赋值给 img 标签的 src 属性，从而在页面中展示上传的图片。
错误处理：
- 如果上传失败（如网络问题或服务器错误），catch 语句会捕获错误，并打印错误信息。