vue 上传图片axios怎么写

在Vue.js中，使用Axios库上传图片通常涉及以下几个步骤：

1. 安装依赖：

npm install axios axios-file-upload

这里我们还需要安装一个插件`axios-file-upload`，它可以帮助我们处理文件上传。

2. 引入并配置 Axios：

import axios from 'axios';
import { upload } from 'axios-file-upload';

const instance = axios.create({
  baseURL: '你的API地址',
  // 其他配置项，如timeout等
});

// 配置文件上传中间件
instance.interceptors.request.use(upload(), error => {
  // 拦截请求错误，例如超时
});

3. 创建上传图片的函数：

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

    instance.post('/api/upload-image', formData)
      .then(response => {
        console.log('上传成功', response);
        // 这里处理上传成功的回调
      })
      .catch(error => {
        console.error('上传失败', error);
        // 处理错误
      });
  }
}

在这个例子中，`uploadImage`方法接收用户选择的图片文件，然后将图片数据封装到FormData对象中，通过POST请求发送给后端 API。

4. HTML 表单部分：

<input type="file" @change="uploadImage($event.target.files)">
<button @click.prevent="uploadImage">上传</button>

当用户选择图片后，`@change`事件触发`uploadImage`方法，并传递选中的文件。