vue上传文件formData入参为空,接口请求500的解决

针对"vue上传文件formData入参为空,接口请求500"这一问题，可以按照以下步骤来进行排查和解决：

1.确保上传接口正确

首先需要确认上传接口是否能够正常处理上传请求，可以使用其他工具或方式来简单测试上传接口是否正常。如果上传接口正确无误，那么可以继续下一步排查。

2.确认请求头信息

当使用formData方式上传文件时，需要设置请求头信息，其中包括"Content-Type"和"Authorization"等信息。具体的请求头信息需要根据服务器要求进行设置，确保请求头信息正确且与服务器端约定一致。

<template>
  <div>
    <form ref="uploadForm" enctype="multipart/form-data">
      <input type="file" name="file">
    </form>
    <button @click="uploadFile">上传文件</button>
  </div>
</template>

<script>
export default {
  methods: {
    async uploadFile() {
      // 创建FormData对象并添加文件
      const formData = new FormData()
      formData.append('file', this.$refs.uploadForm.querySelector('input[type=file]').files[0])
      try {
        // 调用上传接口
        const response = await this.$http.post('/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data', // 请求头必须设置为multipart/form-data
            'Authorization': 'Bearer ' + getToken()  // 设置Authorization信息
          }
        })
        console.log(response.data)
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

3.确认formData数据

formData入参为空可能由于formData数据构造不正确导致。可以通过console.log(formData)语句来查看构造出来的formData对象是否正确，如果为空则需要检查添加的文件是否正确。

<template>
  <div>
    <input type="file" ref="file">
    <button @click="upload">上传</button>
  </div>
</template>

<script>
export default {
  methods: {
    async upload() {
      const file = this.$refs.file.files[0]
      const formData = new FormData()
      formData.append('file', file)
      console.log(formData) // 打印formData对象
      try {
        const res = await this.$axios.post('/upload', formData)
        console.log(res)
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

通过以上两个示例可以发现，在formData构造中需要使用formData.append(key, value)来添加数据，其中key表示数据名称，value表示数据值。如果数据添加不正确，就会导致formData入参为空的问题。同时在提交数据时也需要注意请求头信息，确保请求头信息正确且与服务器端约定一致。