Php 无法使用axios在vue js上更新图像

我对使用axios的vue js上的图像更新功能有问题。我正在使用图像成功地创建数据，但现在我正在堆栈中更新图像

这是模板代码部分

   <template>
  <q-page-container>
    <transition
      enter-active-class="animated fadeInLeft"
      leave-active-class="animated fadeOutRight"
      appear
      :duration="700"
    >
      <q-page>
        <q-toolbar elevated class="text-primary">
          <q-btn
            flat
            round
            dense
            icon="arrow_back"
            @click="$router.push('/produk')"
          />
          <q-toolbar-title>
            Edit produk
          </q-toolbar-title>
        </q-toolbar>
        <form>
          <div class="row justify-center">
            <p style=" width:90%; margin-top:10px;">Nama barang :</p>
            <q-input
              name="namaproduk"
              dense
              outlined
              v-model="dataproduk.namaproduk"
              lazy-rules
              :rules="[
                val => (val && val.length > 0) || 'Please type something'
              ]"
              label="Nama produk"
              style="width:90%; margin-right:10px; margin-left:10px; margin-bottom: 20px; justify-content: center;"
            />
            <p style=" width:90%; ">Harga barang :</p>
            <q-input
              name="harga"
              dense
              outlined
              v-model="dataproduk.harga"
              type="number"
              label="Harga produk"
              style="width:90%; margin-right:10px; margin-left:10px; margin-bottom: 20px; justify-content: center;"
              lazy-rules
              :rules="[
                val => (val && val.length > 0) || 'Please type something'
              ]"
            />
            <p style=" width:90%;">Deskripsi :</p>
            <q-editor
              v-if="dataproduk.deskripsi"
              name="deskripsi"
              style="width:90%; margin-right:10px; margin-left:10px; margin-bottom: 20px; justify-content: center;"
              v-model="dataproduk.deskripsi"
              :definitions="{
                bold: { label: 'Bold', icon: null, tip: 'My bold tooltip' }
              }"
            />
            <p style=" width:90%;">Gambar sekarang :</p>
            <img
              v-if="dataproduk.gambar"
              :src="'http://127.0.0.1:8000/storage/' + dataproduk.gambar"
              style="width:150px; height:150px;"
            />
            <p style=" width:90%;">Ubah Gambar :</p>
            <q-file
              name="gambar"
              @change="handleFileObject()"
              dense
              outlined
              v-model="image"
              label="Gambar produk"
              style="width:90%; margin-right:10px; margin-left:10px; margin-bottom: 20px; "
            />
            <q-btn
              @click.prevent="ubah"
              type="submit"
              dense
              color="primary"
              label="Edit"
              style="width:90%; margin: 20px; justify-content: center;"
            />
          </div>
        </form>
      </q-page>
    </transition>
  </q-page-container>
</template>

如果我不使用字符串和整数形式的“内容类型：多部分/表单数据”，则会成功更改。如果我使用“内容类型：多部分/表单数据”，那么所有数据都无法更新

添加“内容类型：多部分/表单数据”时出错

异常：“照亮\数据库\查询异常” 文件：“D:\magang\serverapi\vendor\laravel\framework\src\illumb\Database\Connection.php” 电话号码：678 消息：“SQLSTATE[23000]：完整性约束冲突：1048列'namaproduk'不能为空（SQL:update

produkdatas

set

namaproduk

=？，

deskripsi

=？，

harga

produkdatas

updated\u at

=2021-04-09 01:50:07其中

id

=13）” 跟踪：[{文件：“D:\magang\serverapi\vendor\laravel\framework\src\light\Database\Connection.php”，…}，…]

---

您好，这里有一个laravel+vue文件输入的工作示例

<img v-if="user.photo" class="block w-8 h-8 rounded-full ml-4" :src="user.photo" />

 <file-input v-model="form.photo" :error="form.errors.photo" class="pr-6 pb-8 w-full lg:w-1/2" type="file" accept="image/*" label="Photo" />

FileInput.vue

<template>
  <div>
    <label v-if="label" class="form-label">{{ label }}:</label>
    <div class="form-input p-0" :class="{ error: errors.length }">
      <input ref="file" type="file" :accept="accept" class="hidden" @change="change" />
      <div v-if="!value" class="p-2">
        <button type="button" class="px-4 py-1 bg-gray-500 hover:bg-gray-700 rounded-sm text-xs font-medium text-white" @click="browse">
          Browse
        </button>
      </div>
      <div v-else class="flex items-center justify-between p-2">
        <div class="flex-1 pr-1">
          {{ value.name }} <span class="text-gray-500 text-xs">({{ filesize(value.size) }})</span>
        </div>
        <button type="button" class="px-4 py-1 bg-gray-500 hover:bg-gray-700 rounded-sm text-xs font-medium text-white" @click="remove">
          Remove
        </button>
      </div>
    </div>
    <div v-if="errors.length" class="form-error">{{ errors[0] }}</div>
  </div>
</template>

<script>
export default {
  props: {
    value: File,
    label: String,
    accept: String,
    errors: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    value(value) {
      if (!value) {
        this.$refs.file.value = ''
      }
    },
  },
  methods: {
    filesize(size) {
      var i = Math.floor(Math.log(size) / Math.log(1024))
      return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i]
    },
    browse() {
      this.$refs.file.click()
    },
    change(e) {
      this.$emit('input', e.target.files[0])
    },
    remove() {
      this.$emit('input', null)
    },
  },
}
</script>

{{label}}：
浏览
{{value.name}}（{{filesize（value.size）}}）
去除
{{错误[0]}
导出默认值{
道具：{
值：文件，
标签：字符串，
接受：字符串，
错误：{
类型：数组，
默认值：（）=>[]，
},
},
观察：{
价值（价值）{
如果（！值）{
此.$refs.file.value=''
}
},
},
方法：{
文件大小（大小）{
var i=Math.floor（Math.log（大小）/Math.log（1024））
返回（大小/数学功率（1024，i））.toFixed（2）*1+''+['B'，'kB'，'MB'，'GB'，'TB'][i]
},
浏览（）{
此.$refs.file。单击（）
},
更改（e）{
此.emit（'input'，e.target.files[0]）
},
删除（）{
此.$emit（'input'，null）
},
},
}

此问题本质上是服务器端问题。读取例外

完整性约束冲突：1048列“namaproduk”不能为空

您的DBMS中有一个约束，阻止列

namaproduk

为空。这意味着没有数据被添加到该列中。向该列添加一些数据，它将通过删除表定义中的

notnull

插入或更改列约束以允许null。如果这是您的blob列，请确保您在服务器端正确处理blob。我已尝试过，但在提交后，我将更改为value的数据将变为null。这是服务器端问题，而不是Axios或Vue问题。此问题源于试图将blob错误地插入正在使用的任何数据库。下面是一个PHP和Mysql的示例，但添加数据成功时

<template>
  <div>
    <label v-if="label" class="form-label">{{ label }}:</label>
    <div class="form-input p-0" :class="{ error: errors.length }">
      <input ref="file" type="file" :accept="accept" class="hidden" @change="change" />
      <div v-if="!value" class="p-2">
        <button type="button" class="px-4 py-1 bg-gray-500 hover:bg-gray-700 rounded-sm text-xs font-medium text-white" @click="browse">
          Browse
        </button>
      </div>
      <div v-else class="flex items-center justify-between p-2">
        <div class="flex-1 pr-1">
          {{ value.name }} <span class="text-gray-500 text-xs">({{ filesize(value.size) }})</span>
        </div>
        <button type="button" class="px-4 py-1 bg-gray-500 hover:bg-gray-700 rounded-sm text-xs font-medium text-white" @click="remove">
          Remove
        </button>
      </div>
    </div>
    <div v-if="errors.length" class="form-error">{{ errors[0] }}</div>
  </div>
</template>

<script>
export default {
  props: {
    value: File,
    label: String,
    accept: String,
    errors: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    value(value) {
      if (!value) {
        this.$refs.file.value = ''
      }
    },
  },
  methods: {
    filesize(size) {
      var i = Math.floor(Math.log(size) / Math.log(1024))
      return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i]
    },
    browse() {
      this.$refs.file.click()
    },
    change(e) {
      this.$emit('input', e.target.files[0])
    },
    remove() {
      this.$emit('input', null)
    },
  },
}
</script>