vue2 axios input file

如果你想使用 Axios 来上传文件，你需要使用 FormData 对象来包装你的文件。下面是一个基本的示例：

// HTML
<input type="file" ref="fileInput" @change="uploadFile">

// JS
import axios from 'axios'

methods: {
  uploadFile() {
    let formData = new FormData()
    formData.append('file', this.$refs.fileInput.files[0])
    
    axios.post('/api/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    .then(response => {
      console.log(response.data)
    })
  }
}

注意，这里的 `Content-Type` 必须设置为 `multipart/form-data`。另外，如果你想上传多个文件，可以使用 `formData.append('file', file)` 来添加每个文件。

相关问题

vue 使用axios上传 file: (binary)

要使用Vue和Axios上传二进制文件，需要先创建一个表单，并使用JavaScript File API将文件转换成二进制数据。然后，使用Axios发送POST请求来将文件发送到服务器。以下是一些步骤：

1. 创建一个带有文件上传控件的HTML表单，例如：

<form id="my-form">
  <input type="file" id="my-file-input">
  <button @click="uploadFile">Upload</button>
</form>

2. 使用JavaScript File API将文件转换为二进制数据。例如：

let fileInput = document.getElementById('my-file-input');
let file = fileInput.files[0];
let reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function() {
  let binaryData = reader.result;
  // 发送请求
}

3. 在Vue组件中，使用Axios来发送POST请求并上传文件。例如：

methods: {
  uploadFile() {
    // 获取二进制数据
    let fileInput = document.getElementById('my-file-input');
    let file = fileInput.files[0];
    let reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = function() {
      let binaryData = reader.result;
      
      // 发送请求
      axios({
        method: 'post',
        url: '/upload',
        data: binaryData,
        headers: {
          'Content-Type': 'application/octet-stream'
        }
      }).then(response => {
        console.log(response.data);
      }).catch(error => {
        console.error(error);
      });
    }
  }
}

在这个例子中，我们使用Axios来发起POST请求，并使用axios.post方法将二进制数据作为请求主体发送。我们还设置了Content-Type标头，将其设置为application/octet-stream，这告诉服务器我们正在发送二进制数据。如果服务器期望不同类型的数据，则需要相应更改标头。最后，我们在.then函数中处理响应，并在.catch函数中处理错误。

以上就是使用Vue和Axios上传二进制文件的一些基本步骤。在实际项目中，您可能需要更复杂的逻辑来处理文件上传，例如进度指示器和错误处理。但是，使用这些基本步骤可以让您开始上传二进制文件并制作自己的文件上传功能。

vue2的axios上传图片

在Vue2中使用axios上传图片，可以按照以下步骤进行操作：

1. 安装axios和qs

npm install axios qs --save

2. 在vue组件中引入axios

import axios from 'axios';

3. 编写上传图片的方法

uploadImage() {
  const formData = new FormData(); // 创建一个FormData对象
  formData.append('file', this.imageFile); // 将上传的文件添加到FormData对象中
  axios.post('/api/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data' // 设置请求头的Content-Type为multipart/form-data
    }
  }).then(res => {
    console.log(res.data); // 处理服务器返回的结果
  }).catch(err => {
    console.error(err); // 处理错误
  });
}

4. 在模板中添加input标签，用于选择文件

<template>
  <div>
    <input type="file" @change="onFileChange">
    <button @click="uploadImage">上传图片</button>
  </div>
</template>

5. 在vue组件中定义onFileChange方法，用于获取选择的文件

onFileChange(event) {
  this.imageFile = event.target.files;
}

以上是一个简单的上传图片的实现方式，可以根据自己的需求进行调整。