Vue axios 将传递的json数据转为form data的例子

当我们使用 Vue.js 和 axios 进行数据交互时，通常会使用 JSON 数据格式来传递数据。但在某些情况下，我们需要将 JSON 数据转换成 FormData 格式，例如在使用 Form 表单上传文件时。下面是一个 Vue axios 将传递的 JSON 数据转为 FormData 的例子：

步骤一：安装 axios

首先需要安装 axios，可以使用 npm 或 yarn 安装，命令如下：

npm install axios
# or
yarn add axios

步骤二：引入 axios

在 Vue 组件中引入 axios，通常可以在 main.js 中全局引入：

import Vue from 'vue'
import axios from 'axios'

Vue.prototype.$http = axios

也可以在组件中引入：

import axios from 'axios'

export default {
  methods: {
    fetchData () {
      axios.get('/api/data').then(res => {
        console.log(res.data)
      })
    }
  }
}

步骤三：将 JSON 数据转为 FormData

在发送 POST 请求时，需要将 JSON 数据转换成 FormData 格式。这可以通过创建 FormData 对象，并使用 Axios 的 post() 方法发送请求来完成。下面是一个例子：

import axios from 'axios'

export default {
  methods: {
    submitForm () {
      const data = {
        name: 'John Doe',
        email: '[e-mail]',
        avatar: this.$refs.avatar.files[0]
      }

      const formData = new FormData()
      Object.keys(data).forEach(key => {
        formData.append(key, data[key])
      })

      axios.post('/api/submit', formData).then(res => {
        console.log(res.data)
      })
    }
  }
}

在这个例子中，我们创建了一个含有 name、email 和 avatar 字段的 JSON 对象。我们使用 FormData() 构造函数，创建一个新的 FormData 对象，并通过使用 append() 方法向其中添加数据。最后，我们使用 axios 的 post() 方法发送这个 FormData 对象。

示例

下面是另外一个使用 FormData 的示例，在这个例子中，我们使用 FormData 对象上传了一个文件：

import axios from 'axios'

export default {
  methods: {
    uploadFile () {
      const file = this.$refs.file.files[0]
      const formData = new FormData()

      formData.append('file', file)

      axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        console.log(res.data)
      })
    }
  }
}

在这个示例中，我们使用 FormData() 构造函数创建一个新的 FormData 对象。然后，我们使用 append() 方法将要上传的文件添加到 FormData 对象中。最后，我们使用 axios 的 post() 方法将 FormData 对象发送到服务器，同时通过 headers 选项指定了请求的 Content-Type 类型为 multipart/form-data。

希望这个攻略对你有帮助！