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);
        // 处理错误回调
      });
  }
}