Vue中使用axios发送formdata请求体_vue axios formdata

今天的项目中遇到了post接口请求体为formData格式具体信息如下图：

如何处理这种格式？

首先要知道什么是FormData对象
FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，可以发送图片等类型的数据。但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data。
如何使用FormData
在js中要使用一个对象就要new出来，具体声明如下图：

 const formData = new FormData()
1

然后调用它的append()方法来添加字段，像这样：

formData.append('Id', this.editListData.Id)
1

那我们在Vue中如何利用axios发起带formdata的请求呢？

下图是我在项目中的处理方式

这里注意上传的图片一定要处理！！！！！
在项目中如果上传一个图片，我们需要额外的处理这个图片，将它转为我们请求体需要的格式。
例如下图：请求的图片是Blob二进制的类型，所以我们应该怎么处理呢？请继续往下看！

那我们如何处理上传的图片呢？
下面是我在项目中使用ElementUi表单项，做了个上传图片的功能


当我们点击选择封面按钮会模拟点击上传文件的input框，我们在上传文件的input框定义了一个change事件，当图片上传的时候，会触发该事件，我们只要触发了事件就会存在event这个事件对象，我们可以通过event.target.files[0] 获取用户上传的文件

打印该File对象如下：

可以这是一个File对象，我们需要对她处理
由于 img 的 src 只能设置 BASE64 或 URL
方案有两种: 转成 BASE64 或 URL
使用FileReader 转换为BASE64
使用createObjectURL转换为URL
*A.使用FileReader 转换为BASE64**

  		A.文件转成 BASE64
        //  1. 创建对象
        // const fr = new FileReader()
        //  2. 读文件
        // fr.readAsDataURL(file)
        //  3. 获取结果
        // fr.onload = e => {
        //  4. 设置给 img 的 src preview为动态的src路径
        //   this.preview  = e.target.result
        // }
1
2
3
4
5
6
7
8
9
10

**B.使用createObjectURL转换为URL**

  preview为动态的src路径
  this.preview = URL.createObjectURL(file)
1
2

以上只是处理img的动态显示的图片路径

那如何将FIle转为 blob 类型呢？

看如下代码

	// file 对象就是 blob 的子类对象, 所以可以直接传递给后台
        this.editListData.cover_img = file
1
2

以上就是项目中的问题记录，希望这篇文章能给需要的人带来帮助，由于个人的能力有限，如果文章哪里有问题，请多多包涵