Vue使用formData格式类型上传文件的示例

下面是“Vue使用formData格式类型上传文件的示例”的完整攻略。

1. 什么是formData格式类型上传文件

在前端上传文件时，一般需要将文件的二进制数据转换为一种可被后端接收的格式，最常用的格式有form-data和base64编码。其中最常用的方法是使用form-data格式。formData格式是一种键值对的格式，每一个键对应一个值，值可以是字符串或者文件。当我们上传文件时，每一个文件对应一个键值对，键为上传文件的名称，值为上传文件的二进制内容。formData格式相对于其他格式的优点是可以同时上传多个文件，且文件类型不受限制。

2. 如何在Vue中使用formData格式上传文件

使用Vue在上传文件时，一般需要使用vue-resource或者axios两个库。下面我们以axios为例，讲解如何使用formData格式上传文件。

示例一：上传一张图片

<template>
  <input type="file" ref="file" @change="handleUpload">
</template>
<script>
import axios from 'axios'

export default {
  methods: {
    handleUpload() {
      const file = this.$refs.file.files[0]
      const formData = new FormData()
      formData.append('file', file)
      axios.post('/upload', formData).then(res => {
        console.log(res.data)
      })
    }
  }
}
</script>

在上述代码中，我们使用了html5中的文件上传input标签，监听了change事件。当用户选择了一张图片，我们使用FormData定义了一个formData变量，然后使用formData.append()方法将选择的文件添加到formData中。接着，我们使用axios.post()方法将formData上传到服务器，并打印了上传成功后返回的数据。

示例二：上传多张图片

<template>
  <input type="file" ref="file" multiple @change="handleUpload">
</template>
<script>
import axios from 'axios'

export default {
  methods: {
    handleUpload() {
      const files = this.$refs.file.files
      const formData = new FormData()
      Array.from(files).forEach(file => {
        formData.append('files[]', file)
      })
      axios.post('/upload', formData).then(res => {
        console.log(res.data)
      })
    }
  }
}
</script>

在上述代码中，我们在input标签中加入了multiple属性，表示支持多选，然后在handleUpload()方法中，我们通过for循环遍历选中的所有文件，并使用formData.append()方法将文件全部添加到formData中。formData.append()方法的第一个参数为键名，需要添加中括号来表示这是一个数组类型，第二个参数为对应的文件，这里我们使用了ES6的forEach方法来遍历数组。最后，我们使用axios.post()方法将formData上传到服务器，并打印了上传成功后返回的数据。

3. 总结

以上就是Vue中使用formData格式上传文件的完整攻略，总结一下，formData格式上传文件的基本原理是：将文件转换为formData格式的键值对一一对应，然后使用Ajax请求将formData传输到服务器即可。当上传的文件数量较大时，我们可以使用for循环或者ES6的forEach方法来添加多个文件到formData中。希望这篇攻略能够对你上传文件时的前端开发有所帮助。