上传含文件流的表单，我才认识FormData

如果我要向后台提交一个很多数据的表单，其中除了有字符串，还要传文件，同时后台要求你直接传递一个文档流，那么FormData可能必不可少。

首先我的表单长这样子。

上传组件使用了element-ui的el-upload组件，这个组件提供了内置的手动上传和自动上传方法，由于这个项目是没有文件库的，所以我们只能采取手动上传的方式，通过http-request这个出口，把上传的方式丢在这里，拿到用户上传的文件。

 // html部分      
     <el-form-item label="问题图片">
        <el-upload ref="imageUpload" action="#" :disabled="!isAdd" list-type="picture-card" :http-request="uploadImage"
          :before-upload="beforeImageUpload" :on-preview="handleImagePreview" :limit="6" :on-exceed="handleMsg">
          <i class="el-icon-plus"></i>
          <div slot="tip">最多上传6张图片，且不支持gif格式</div>
        </el-upload>
        <el-dialog :visible.sync="imageDialog" append-to-body>
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>

上传方法如下：

      // 上传图片
      uploadImage(param) {
        let file = new Blob([param], { type: param.type })
        this.customerForm.images.push(file)
      },

在上面这段代码中，我们拿到了文件字段param，然后通过new一个Blob的方式将他转换成文档流的形式，后面的customerForm是我定义的表单名称，images是这个表单中存放图片的数组，把上传的文件转换成文档流以后push进这个images数组。

最后上传方法如下：

 handleAdd() {
        let data = {
          ...this.orderForm,
          ...this.customerForm,
        }
        let format = new FormData();

        for (let property in data) {
          if (property == 'images' || property == 'video') {
            for (let i = 0; i < data[property].length; i++) {
              format.append(property, data[property][i]);

            }
          } else {
            format.append(property, data[property]);
          }
        }
        submitOrder(format).then(res => {
          this.$message({ type: 'success', message: '新增成功!' });
          this.addVisible = false
        })
      },

new一个FormData的对象，将我们的数据一个一个添加到里面，组成键值对的形式，最后，将我们组装好的FormData对象传给后台，新增成功！

FormData对象是什么呢，简单来讲，他就是一个储存键值对的模型。当上传的参数中有文档流的时候，他是不能被序列化的，这时候我们就需要用到FormData。

let formdata = new FormData()  //初始化FormData对象

formdata.append('name','potato')  // append添加数据

console.log(formdata.getAll('name'));	// 获取key为name的所有值，是一个数组
console.log(formdata.get('name'));		// 获取key为name的第一个值

formdata.set('name','tomato')  // set修改数据

formdata.delete('name')  // delete删除数据

console.log(formdata.has('pwd'));	// has(key) 如果存在返回true,否则返回false

FormData 对象的使用：

1. 用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个queryString

2. 异步上传二进制文件。

总结一下，上传含文档流的表单的步骤就是：

1.将文件转化成Blob文档流格式；

2.将所有表单字段通过添加到formdata中，上传文件时通过formdata格式提交

上传含文件流的表单，我才认识FormData

猜你喜欢