vue上传api接口

在Vue.js中，你可以使用axios库来发送文件上传请求到API接口。以下是一个简单的示例：

首先，确保安装了axios库（如果尚未安装）：

npm install axios
# 或者
yarn add axios

然后，在Vue组件中，你可以这样实现文件上传功能：

<!-- 使用v-model绑定input元素以便监听变化 -->
<input type="file" @change="uploadFile($event)" />

<script>
import axios from 'axios';

export default {
  methods: {
    // 上传文件的方法
    uploadFile(e) {
      const file = e.target.files[0]; // 获取用户选择的文件
      const formData = new FormData(); // 创建FormData对象以保存文件

      formData.append('file', file); // 添加文件到FormData

      axios.post('/api/upload', formData, {
        headers: { 'Content-Type': 'multipart/form-data' } // 设置正确的Content-Type
      })
        .then(response => {
          console.log('Response:', response.data);
          // 处理服务器响应
        })
        .catch(error => {
          console.error('Error uploading file:', error);
        });
    }
  }
}
</script>

在这个例子中，`/api/upload`是你API接口的实际URL。当你选择文件并触发改变事件时，`uploadFile`方法会被调用，将文件上传到指定的API。