Javascript VueJS:$\文件未从前端到后端接收数据

我尝试了不同的方法将图像上传到SQL，但问题是我无法在后端获取文件的数据。一些答案说，这是因为表单没有enctype，但我也尝试过。我不确定它是否适用于Vue，因为我使用的是axios。此外，我还尝试将uploadFile用作axios的参数，因此$\u文件也会将其读取为$\u GET，因为它也适用于我的一些代码。顺便说一下，SubmittedData位于另一个文件夹中的另一个文件中，该文件夹位于存储区（VueX）内。我使用dispatch将数据发送到存储，以便它最终将post方法发送到后端

store.js

  submitTestData2 ({ commit }, payload) {
        console.log(payload.uploadFile)
        return new Promise((resolve, reject) => {
          const formData = new FormData()
          formData.append('uploadFile', payload.uploadFile)
          const config = {
            headers: { 'Content-Type': 'multipart/form-data' }
          }
          axios
            .post(
              'http://localhost/MyComposer/',
              {
                token: payload.token,
                subject: payload.subject,
                timer: payload.timer,
                question: payload.question,
                answer: payload.answer,
                formData
              },
              {
                params: {
                  submitId: 7,
                  uploadFile: formData
                },
                config
              }
            )
            .then(response => {
              commit('SAVE_TEST_DATA', response.data)
              console.log(response)
              resolve(response)
            })
            .catch(error => {
              reject(error)
            })
        })
      },

AddTest.vue

 <q-form class="q-pa-md" align="center">
        <h5>Test Creation Form</h5>
        <!-- <q-btn label="Add Subject" color="primary" to="/addsub" /> -->
        <q-btn label="Return to Main" to="/dashboard" color="primary" />&nbsp;
        <q-btn label="View Student Answers" color="primary" to="/subjectntestlist" />&nbsp;
        <q-btn label="View Student Profile" color="primary" to="/studentprofile" />
        <q-card>
          <q-separator />
          <q-card-section class="q-gutter-md" align="center">
            <q-select
              filled
              v-model="testItems.subject"
              :options="option"
              map-options
              emit-value
              option-value="subjectId"
              option-label="subjectName"
              label="Choose a Subject"
              style="width: 250px"
              stack-label
              input-debounce="0"
            />
            <q-file
              filled
              v-model="testItems.uploadFile"
              label="Upload File Here"
              style="width: 500px"
            />
            <h5>Timer</h5>
            <q-input label="Minute(s)" name="timer" v-model="testItems.timer" style="width: 500px" />
            <h5>Question</h5>
            <q-input name="question" v-model="testItems.question" style="width: 500px" />
            <h5>Answer</h5>
            <q-input name="answer" v-model="testItems.answer" style="width: 500px" />
            <br />
            <q-btn label="Save Test Item" @click="submitTestData" />
          </q-card-section>
        </q-card>
      </q-form>

submitTestData1() {
      this.$store
        .dispatch("submitTestData2", {
          token: this.token,
          subject: this.testItems.subject,
          question: this.testItems.question,
          answer: this.testItems.answer,
          uploadFile: this.testItems.uploadFile,
          timer: this.testItems.timer
        })
        .then(response => {
          alert("Test was added to the database!");
        });
    },

测试创建表单
计时器
问题:
答复


submittedData1（）{
这是一家$1的商店
.发送（“提交数据2”{
token:this.token，
主题：this.testItems.subject，
问题：这个测试题，
回答：这个，
uploadFile:this.testItems.uploadFile，
定时器：this.testItems.timer
})
。然后（响应=>{
警报（“测试已添加到数据库！”）；
});
},

---

您需要像下面一样传递标题

submitTestData ({ commit }, payload) {
    console.log(payload.uploadFile)
    return new Promise((resolve, reject) => {
      const formData = new FormData()
      formData.append('uploadFile', payload.uploadFile)
      const config = {
            headers:{'Content-Type' : 'multipart/form-data'}
       };
      axios
        .post('http://localhost/MyComposer/',formData,config)
        .then(response => {
          commit('SAVE_TEST_DATA', response.data)
          console.log(response)
          resolve(response)
        })
        .catch(error => {
          reject(error)
        })
    })
  },

看起来您没有从$\u FILES superglobal正确获取文件名。您的代码中有$_FILES['uploadFile']，但是$_FILES数组的结构与此类似，用于上载（uploadFile表示表单中文件上载输入字段的名称，因此此名称因输入字段名称而异）：

因此，要访问文件名，需要将代码更改为：$\u FILES['uploadFile']['name']

实际文件存储在服务器上的临时文件位置，因此您需要获取该临时文件并将其移动到服务器上的其他位置。大多数人都是这样做的：

$temp_file = $_FILES['uploadFile']['tmp_name'];
$target_upload_destination = 'path/to/desired/directory/' . basename($_FILES['uploadFile']['name']);

// Check to see that the file was moved to desired destination successfully
if (move_uploaded_file($temp_file, $target_upload_destination)) {
      // do something here
    } else {
      // Fallback logic here
}


显然，在移动服务器上的临时文件之前，应该进行一些逻辑检查，但是，我希望您了解这背后的基本概念。为DB insert移动文件路径后，应使用该路径。我希望这会有所帮助。
在客户端和服务器端代码中都存在一些问题

客户端
如果要发送文件，必须使用
FormData
负载的
multipart/FormData
请求。您似乎试图将JSON负载与嵌入的
FormData
组合起来，但这根本不起作用

你需要这样的东西

const formData=new formData（）
Object.entries（payload.forEach（[key，val]）=>{
//将“有效负载”中的所有属性添加到“formData”
formData.append（键，val）
})
轴心柱http://localhost/MyComposer，formData{
参数：{submitId:7}
})

❗ 请注意，没有添加
内容类型
标题。传递一个
FormData
实例将自动使用所需的mime边界设置它

服务器端
在PHP端，您将从
$\u POST

$subject=$\u POST['subject']；
$access\u id=$\u POST['token']；
$question=$_POST['question']；
//等

上载文件将在
$\u文件中提供（请参阅）

$uploadFile=$\u文件['uploadFile']；
如果（！$uploadFile['error']）{
echo$uploadFile['name']；
}
仍然不为我工作。你的答案很有道理，所以我把它添加到我的代码中。我应该使用append中的uploadFile作为$\u文件中的名称吗？我根据这里的答案编辑了submitteddata方法。您认为它与您的答案兼容吗？还是我也需要在formData.append中添加“name”？这只是针对PHP中的服务器端内容。安库关于头球的回答是一个很好的回答。您是否尝试在上传后打印$\u文件数组以查看是否设置了任何内容？如果数组为空，则传递的内容存在问题。要调试，请尝试以下操作：打印\u r（$\u文件）；根据请求负载，formData（最近上载的文件）是一个空对象。是的，阵列是空的，那么我现在该怎么办？做了一些挖掘，看起来你在用类星体和vue，对吗？如果是这样的话，我发现了这样一个小提示：“当处理一个具有操作和方法的本机表单时（例如，当使用Quasar与ASP.NET控制器时），您需要在QFile上指定name属性，否则formData将不包含它（如果应该）：”，您可以尝试给该输入字段一个名称，在PHP代码“uploadFile”中使用相同的名称吗？如果SubmittedData位于不同的文件上，则追加是否有效？在VueJS中，为了更好地管理，我将其添加到了商店中。也许它没有读到它？对我来说仍然不起作用：（.我甚至在q文件上放了一个name=“uploadFile”只是为了让它与append保持一致。到底什么“不起作用”？你的PHP环境真的设置为允许文件上传吗？@codebudy7这两个问题都没有回答。Q1-什么“不起作用”？Q2-您是否尝试过使用PostMan或类似工具进行简单的上载测试？您是否配置了启用文件上载所需的所有PHP设置？Q1-FormData不起作用，因此它将一个空对象作为请求负载传递..Q2-我尝试了本机PHP文件上载，但如果$\u文件没有获得任何数据，它将不起作用。“FormData不起作用”您有
@click=“submittedData"
但是您的
SubmittedData
看起来像是Vuex操作。您将在哪里传递
有效负载
？很抱歉没有粘贴完整的代码。我现在更新了问题。SubmittedData具有相同的名称。一个用于调度，一个用于Axios post请求。现在我添加了一个数字，以便您现在可以看到流程。更新：我成功地完成了tw说我的坏话
Array
(
    [uploadFile] => Array
            (
                      [name] => users_file_name.png
                      [type] => image/png
                      [tmp_name] => /path/to/temporary/files/abc123
                      [error] => 0
                      [size] => 12345
            )
)

$temp_file = $_FILES['uploadFile']['tmp_name'];
$target_upload_destination = 'path/to/desired/directory/' . basename($_FILES['uploadFile']['name']);

// Check to see that the file was moved to desired destination successfully
if (move_uploaded_file($temp_file, $target_upload_destination)) {
      // do something here
    } else {
      // Fallback logic here
}