POST 文件以及表单数据 Vue + axios [英] POST file along with form data Vue + axios

问题描述

我有一个 Vuejs 组件的方法:

I have a method for Vuejs component:

async submit () {
        if (this.$refs.form.validate()) {
          let formData = new FormData()
          formData.append('userImage', this.avatarFile, this.avatarFile.name)
          this.avatarFile = formData
          try {
            let response = await this.$axios.post('http://localhost:3003/api/test.php', {
              avatar: this.avatarFile,
              name: this.name,
              gender: this.gender,
              dob: this.DOB,
            }, {
              headers: {
                'Content-Type': 'multipart/form-data; boundary=' + formData._boundary
              }
            })
            if (response.status === 200 && response.data.status === 'success') {
              console.log(this.response)
            }
          } catch (e) {
           console.log(e)
          }
        }
      }

在 test.php 中，我使用 json_decode(file_get_contents("php://input"), TRUE); 将数据读取为 $_POST 变量.

And in test.php, I'm using json_decode(file_get_contents("php://input"), TRUE); to read data as $_POST variables.

虽然我能够正确读取name、gender 和dob，但我无法获取avatar正确.

While I am able to read name, gender and dob correctly, I can't fetch avatar properly.

有相同的解决方案吗?

注意:我不会将每个变量附加为 formData.append(.., ..) 因为我计划处理超过 14 个变量.

Note: I don't to append every variable as formData.append(.., ..) as I am planning to handle over 14 variables.

版主注意:我没有发现将 formData 与其他数据对象一起使用的任何问题.

Note for moderators: I didn't find any question where formData was being used along with other data objects.

推荐答案

所以，我以一种更简单的方式解决了这个问题:

So, I figured this one out in a simpler way:

    let rawData = {
                name: this.name,
                gender: this.gender,
                dob: this.dob
              }
              rawData = JSON.stringify(rawData)
    let formData = new FormData()
          formData.append('avatar', this.avatarFile, this.avatarFile.name)
          formData.append('data', rawData)
    try {
            let response = await this.$axios.post('http://localhost:3003/api/test.php', formData, {
              headers: {
                'Content-Type': 'multipart/form-data'
              }
         })

test.php:

$_POST = json_decode($_POST['data'],true);

注意:我可以选择使用:

Object.keys(rawData).map(e => {
            formData.append(e, rawData[e])
          })

但是由于我在 rawData 中处理嵌套对象 (name: { first: '', last: ''} )，我选择不这样做，因为它需要递归方法客户端或服务器端.

but since I was dealing with nested objects (name: { first: '', last: ''} ) in rawData, I chose not to do that as it would require recursive methods on either client side or server side.

这篇关于POST 文件以及表单数据 Vue + axios的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！