new formData 时遇到的一些问题

在做文件上传功能时，用到了new formData，期间遇到了三个问题记录一下。

1. 使用append追加后console仍为空

来看一下代码：

1. 按照正常的打印习惯，一开始是选择直接打印追加完文件后的 formData，但在控制台看的时候发现这项数据为空。

2. 考虑文件是否追加成功问题，又添加了上传文件的打印语句：

3. 排除文件数据问题后，怀疑是打印语句出了问题。百度后发现需要用formData.get("键") 的方法获取值。

这样就能成功打印出值了。

2. formData 键值对与接口文档参数匹配问题

1. 上面问题1里想要打印 formData 的值，主要是因为后面的代码在调接口时发现并没有走到.then方法里，而是直接通过.catch把 error 打印出来了。

（1）问题解决前：

（2）问题解决后：

2. 注意一下红色箭头指向的 key。首先来看一下.append方法：

这里键值对的key值应该和接口文档提供的参数名保持一致：

所以注意到这个问题后，文件上传功能就正常实现了。

3. FormData.append() 值集合获取 .get() 和 .getAll()

1. 在测试上传两个文件时，打印键'content'的值集合。根据打印语句结果可以看到，此时只显示一个文件内容。

2. 通过 MDN 查看 FormData.append() 方法：

查看接口请求携带参数可以看到，此时接口确实接收到了两个文件。

3. 查看 FormData.get() 方法

修改后能正确返回指定键关联的全部值：

4. 补充：手动实现文件上传 和 el 组件实现

1. 手动实现

……
<span @click="uploadCluster" ref="importFile">
  <i class="fa fa-download" aria-hidden="true">&nbsp;文件上传</i>
</span>&nbsp;&nbsp;&nbsp;&nbsp;
<input id="file" type="file"/>

……
uploadCluster() {
  const fileList = document.getElementById('file').files;
  
  // 1.上传文件为空
  if (!fileList.length) {
    this.$message.error('请选择文件');
    return;
  }
  // 2. 多选时对上传文件个数限制  multiple="multiple"
  // if (fileList.length > 3) {
  //   this.$message.error('上传文件个数超过限制');
  //   return;
  // }
  // for (let i = 0; i < fileList.length; i++) {
  //   file.append('content', fileList[i]) 
  // }
  
  const file = new FormData();
  file.append('content', fileList[0]);

 // 3. 调用接口
  UploadCluster(file).then(res => {
    if (res.data.code === 200) {
      this.$message.success(res.data.message);
    }
  });
},

2. Upload 上传

……
<el-upload
  action=""
  :before-upload="_uploadFile"
  multiple="multiple"
  :limit="1"
  style="display: inline-block">
  <el-button class="panl-btn" size="small" type="primary" round>文件上传</el-button>
</el-upload>

……
_uploadFile(file) {
  const formData = new FormData();
  formData.append('content', file);
  UploadCluster(formData).then(res => {
    console.log('res', res);
    if (res.data.code === 200 && res.data.status) {
      this.$message.success(res.data.message);
    }
  });
  return false;
}

5. 引申：multiple 和 $message

1. multiple

multiple 属性规定输入字段可选择多个值，默认 false。multiple 属性使用于以下 input 类型：email 和 file。

注意：要按 ctrl 选中多个才是多选

2. $message Message 消息提示，常用于主动操作后的反馈提示。\ Element 注册了一个`$message`方法用于调用。 两种表现形式：

 // 1. 
 this.$message({
   type: 'success',
   message: res.data.message
 });
 
 // 2.
 this.$message.success(res.data.message);