multipart/form-data表单请求代码

前几天写接口，body参数都是(application/json)，这次遇见（multipart/form-data）的，然后踩了好大一个坑，在这里我记录一下。

这是一个提交表单数据的接口。

这里我先展示一下代码：

这是api处的代码

/**
 *
 * @param {*} td
 * @returns
 */
// 发布文章的接口(application/form-data)像以前一样，传入的值都是JSON 字符串，但这个是表单form-date数据，不一样
export const postArticle = (td) => {
  return request({
    url: '/my/article/add',
    method: 'POST',
    data: td
  })
}

js（业务区代码展示）

import { initActicleCate, postArticle } from '@/api'

 // 发布文章
    postArticleFn (state) {
      this.articleForm.state = state
      this.$refs.articleForm.validate(async (valid) => {
        if (valid) {
          // 通过校验
          // 数据转化成表单
          // formData() 创建于一个实例对象
          // Object.keys() 返回一个数组,数组由key组成
          const fd = new FormData()
          // 踩坑代码在此
          // 报错500
          // Object.keys(this.articleForm).forEach(key => {
          //   fd.append(key, this.articleForm[key])
          // })
  
          // 由于规范，必须这样写
          fd.append('title', this.articleForm.title)
          fd.append('cover_img', this.articleForm.cover_Img)
          fd.append('cate_id', this.articleForm.cate_id)
          fd.append('content', this.articleForm.content)
          fd.append('state', this.articleForm.state)
          const res = await postArticle(fd)
          if (res.status === 200) {
            const code = res.data.code
            if (code !== 0) return this.$message.error(res.data.message)
            this.$message.success(res.data.message)
            // 跳转关闭
            this.dialogVisible = false
            // 清空数据
            this.$refs.articleForm.resetFiled()
          } else if (res.status === 401) {
            this.$message.error('身份认证失败')
          } else {
            this.$message.error('接口未知错误')
          }
        } else {
          return false // 阻止表单的默认提交行为
        }
      })
    },

在这里，我想重点说一下我踩坑的地方，从上面代码可以看出，向fd添加一个新值到 FormData 对象内的一个已存在的键中时，写了五行相似代码，这无疑是有些不太优雅的行为，于是，我搜索到了下列做法:

 Object.keys(this.articleForm).forEach(key => {
             fd.append(key, this.articleForm[key])
           })

在反复验证代码没有写错的情况下，却疯狂报错500，令我百思不得其解，遂询问他人，据其解释，fd.append()一个一个写入是规范。

 （此处贴图的目的是，告诉大家，不会的问题不要死磕，记得及时询问）

但我肯定不能一句”规范“就结束文章，根据代码，我推测要么是Object.keys()引发的问题，要么是foreach()

于是我搜索了两篇文章

Object.keys()：一行 Object.keys() 引发的血案 - 掘金

foreach()：foreach()踩过的坑 - 掘金

Object.keys() 返回顺序，并不是我们想的，按照我们自己输入数组的顺序返回的，

他的机制如下：

 foreach()：遍历调用。扩展一下就是，遍历数组中所有元素，并且不会停止。

这两个会引发的问题就在此了，但我猜测应该和顺序没关系，估计是因为foreach()遍历不停止导致的一些错误。（仅仅猜测，别问我为什么不验证，因为我菜，不知道怎么验证，希望有大佬看到这篇文章能帮忙验证一下）

总之，大家按照规范写就行，记得点赞，点了赞大家就是一家人了，有什么好资料我都会第一时间上传的。关注我，不迷路。爱你。