vue上传文件formData上传的解决全流程

下面我来详细讲解“Vue上传文件formData上传的解决全流程”的完整攻略。本攻略将围绕如下四个方面展开：

1. 介绍formData的基本概念
2. 通过vue实现文件formData上传的步骤
3. 以图片上传为例进行演示
4. 以文件上传为例进行演示

1. formData的基本概念

• form是HTML表单的一个本质，每个form控制一组WEB控件，这些控件包括输入框，按钮，单选按钮，多选框和文件选择框等。
• formData是一个字符串数据缓存区，用于存储一组键值对存放于HTTP请求消息内的BODY部分。

2. 通过vue实现文件formData上传的步骤

以下是使用vue实现文件formData上传的步骤：

1. HTML中准备一个文件选择框

<input
  type="file"
  ref="fileInput"
  style="display: none;"
  @input="handleFileInputChange"
/>

1. 绑定方法，打开文件选择框并取得选择的文件

handleButtonClick() {
  this.$refs.fileInput.click();
},

handleFileInputChange(event) {
  this.file = event.target.files[0];
},

1. 构建formData对象并发起POST请求

handleSubmitButtonClick() {
  const formData = new FormData();
  formData.append('file', this.file);

  axios.post('/api/file/upload', formData).then(response => {
    console.log(response);
  });
},

3. 以图片上传为例进行演示

以下是以图片上传为例演示formData上传的完整代码：

<template>
  <div>
    <button @click="handleButtonClick">选择图片</button>
    <button @click="handleSubmitButtonClick">上传图片</button>
    <img :src="imageUrl" />
    <input
      type="file"
      ref="fileInput"
      style="display: none;"
      @input="handleFileInputChange"
    />
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null,
      imageUrl: null,
    };
  },

  methods: {
    handleButtonClick() {
      this.$refs.fileInput.click();
    },

    handleFileInputChange(event) {
      this.file = event.target.files[0];
      this.imageUrl = URL.createObjectURL(this.file);
    },

    handleSubmitButtonClick() {
      const formData = new FormData();
      formData.append('image', this.file);

      axios.post('/api/image/upload', formData).then(response => {
        console.log(response);
      });
    },
  },
};
</script>

该代码中实现了选择图片并显示、上传图片功能，其中点击“选择图片”按钮，会打开文件选择框，选择图片后在页面上显示出来。
当点击“上传图片"时，会通过FormData方式上传图片到后台。

4. 以文件上传为例进行演示

以下是以文件上传为例演示formData上传的完整代码：

<template>
  <div>
    <button @click="handleButtonClick">选择文件</button>
    <button @click="handleSubmitButtonClick">上传文件</button>
    <input
      type="file"
      ref="fileInput"
      style="display: none;"
      @input="handleFileInputChange"
    />
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null,
      fileName: null,
    };
  },

  methods: {
    handleButtonClick() {
      this.$refs.fileInput.click();
    },

    handleFileInputChange(event) {
      this.file = event.target.files[0];
      this.fileName = this.file.name;
    },

    handleSubmitButtonClick() {
      const formData = new FormData();
      formData.append('file', this.file);

      axios.post('/api/file/upload', formData).then(response => {
        console.log(response);
      });
    },
  },
};
</script>

该代码中实现了选择文件并显示、上传文件功能，其中点击“选择文件”按钮，会打开文件选择框，选择文件后，文件名会在页面上显示出来。
当点击“上传文件”时，会通过FormData方式上传文件到后台。

总之，无论是上传图片还是文件，我们都是通过formData的方式实现的。实现的过程，主要分为三步：“选择文件”、“构建formData”、“发送POST请求”，并且在构建formData时，一定要使用append()方法将文件加入到formData中，否则formData将无法携带文件发送到后台。