首页 > 解决方案 > FormData 没有得到任何响应

问题描述

之前,我设法使用 FormData 在文件目录中插入图像文件。但是现在,我现在尝试用于更新错误图像的 FormData 正在返回一个空数据,即使我传递了正确的参数/有效负载,这是一个object. 我尝试使用 FormData.set 进行更新,甚至在 forEach 上进行了一些试验,但它们都不适合我。在 Quasar(类似于 Javascript 的 Bootstrap)中,我们获取rows每个数据的 ,因此我们可以更新一行数据。我应该在 FormData 最终得到响应之前获得图像的行吗?

前端

<template>
<div>
<q-table
          :filter="filter"
          title="Test Section"
          :data="dtdata"
          :columns="columns"
          row-key="TestId"
        >
          <q-tr slot="body" slot-scope="props" :props="props" class="cursor-pointer">
            <q-td v-for="col in props.cols" :key="col.name" :props="props">
              {{
              col.value
              }}
            </q-td>

            <q-td class="q-gutter-md">
              <q-btn label="Edit" color="primary" @click.native="gatherData(props.row)" />
              <q-btn label="Delete" color="red" @click.native="activateDel(props.row)" />
              <q-btn label="Change Picture" color="green" @click.native="changeThisPic(props.row)" />
            </q-td>
          </q-tr>
        </q-table>
</div>
</template>
<script>
methods: {
 changeThisPic(row) {
      this.editPic = true;
      this.editData.testId = row.testId;
      this.editData.testItemId = row.testItemId;
    },
sendPicForUpdate() {
      this.$store
        .dispatch("UPDATE_PIC", {
          testId: this.editData.testId,
          uploadFile: this.editData.uploadFile,
          testItemId: this.editData.testItemId
        })
}
</script>

export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    mutations: {
       UPDATE_PIC ({ commit }, payload) {
        const formData2 = new FormData()
        Object.entries(payload).forEach(([key, val]) => {
          formData2.append(key, val)
        })

        axios
          .put('http://localhost/MyComposer/', formData2, {
            params: {
              updateId: 2,
              testId: payload.testId,
              testItemId: payload.testItemId
            }
          })
          .then(response => {
            alert(response.data)
            console.log(response)
          })
          .catch(error => {
            console.log(error)
          })
      }
},

后端

<?php
    if (isset($_GET['updateId']) && $_GET['updateId'] == 1) {

            $data = file_get_contents('php://input');
            $decoded = json_decode($data);
            $testId = $decoded->{'testId'};
            $sub = $decoded->{'subject'};
            $question = $decoded->{'question'};
            $answer = $decoded->{'answer'};
            $testItem = $decoded->{'testItemId'};

            $db->where('TestItemId', $testItem);
            $arrayDir = array('FileLocation');
            $uploaddir = $db->get('teachertest', null, $arrayDir);
            $uploadfile = $uploaddir . $_FILES['uploadFile']['name'];
if (move_uploaded_file($_FILES['uploadFile']['tmp_name'], $uploadfile)) {
                echo "File is valid, and was successfully uploaded.\n";
            } else {
                echo "Upload failed";
            }


            if (!empty($sub)) {

                $sdata = array(
                    'SubjectId' => $sub,
                );

                $db->where('TestId', $testId);
                $newsub = $db->update('teachertest', $sdata);
                if ($newsub) {
                    echo "Subject was changed and";
                }

                $tdata = array(
                    'Question' => $question,
                    'Answer' => $answer,
                );

                $db->where('TestId', $testId);
                $newdb = $db->update('testdetails', $tdata);
                if ($newdb) {
                    echo "Test item details were updated!";
                }
            } 
?>

标签: javascriptphpvue.js

解决方案


推荐阅读