axios.post上传图片

以下是使用axios.post上传图片的示例代码：

import axios from 'axios';

// 选择图片文件
const file = document.querySelector('input[type="file"]').files[0];

// 创建FormData对象
const formData = new FormData();
formData.append('image', file);

// 发送POST请求
axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error);
});

上述代码中，我们首先通过`document.querySelector`方法获取了一个`<input>`元素，然后从中选择了第一个文件。接着，我们创建了一个`FormData`对象，并将选中的文件添加到其中。最后，我们使用`axios.post`方法向服务器发送POST请求，并将`FormData`对象作为请求体发送。在请求头中，我们设置了`Content-Type`为`multipart/form-data`，以告诉服务器我们发送的是一个包含文件的表单数据。

相关问题

axios.post 设置请求头上传图片

可以使用axios.post设置请求头来上传图片，例如：let config = { headers: { 'Content-Type': 'multipart/form-data' } } axios.post('/upload', formData, config)

vue3 使用axios post 上传图片

在Vue 3 中，使用 axios 进行 POST 请求上传图片通常会涉及以下几个步骤：

1. 引入依赖：首先需要安装 axios 和一个用于读取文件的库，比如 `file-saver` 或者 `blob-to-url` 来处理文件流。可以通过npm或yarn安装它们：

   npm install axios file-saver

2. 创建实例：在 Vue 组件内创建 axios 的实例，以便统一管理请求。

import axios from "axios";
const service = axios.create({
  baseURL: process.env.BASE_API, // api的baseURL
  timeout: 5000, // 请求超时时间
});

3. 图片预处理：当用户选择图片后，你需要处理图片文件。可以使用 FileReader API 或者第三方库来读取并转换图片。这里以使用 `blob-to-url` 为例：

async function readImageAsDataURL(file) {
  const reader = new FileReader();
  reader.onload = function (event) {
    return event.target.result; // 返回 Base64 编码的 URL
  };
  reader.readAsDataURL(file);
}

4. 实际上传：现在有了图片的 Base64 URL，将其作为 body 发送到后端。同时，你可以考虑设置一个进度条或者其他反馈机制。

methods: {
  uploadImage(file) {
    const formData = new FormData();
    formData.append('image', file, file.name);

    const blobUrl = await readImageAsDataURL(file);
    formData.append('imageUrl', blobUrl);

    service.post('/api/upload', formData)
      .then(response => {
        console.log(response.data);
        // 处理成功回调
      })
      .catch(error => {
        console.error(error);
        // 处理错误回调
      });
  }
}