image cannot update on vue js with axios

Question

I have a problem with the image update feature on vue js using axios. I'm successfully creating data with image, but now I'm stack in update the image

this is the template code section

   <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>

This method is used to modify data

methods: {
handleFileObject() {
  this.image = this.$refs.file.files[0];
},
ubah() {
  var dataproduk = new FormData();
  dataproduk.append("namaproduk", this.dataproduk.namaproduk);
  dataproduk.append("harga", this.dataproduk.harga);
  dataproduk.append("deskripsi", this.dataproduk.deskripsi);
  dataproduk.append("gambar", this.image);
  _.each(this.dataproduk, (value, key) => {
    dataproduk.append(key, value);
  });
  axios
    .put(
      "http://127.0.0.1:8000/api/produk/update/" + this.id,
      this.dataproduk,
      {
        headers: {
          "Content-Type":
            "multipart/form-data; charset=utf-8; boundary=" +
            Math.random()
              .toString()
              .substr(2)
        }
      }
    )
    .then(response => this.$router.push("/indexadmin"))
    .catch(err => {
      if (err.response.status === 422) {
        this.errors = [];
        _.each(err.response.data.errors, error => {
          _.each(error, e => {
            this.errors.push(e);
          });
        });
      }
    });
}

if I do not use "content-type:multipart/form-data" data in the form of strings and integers it is successfully changed. if I use "content-type:multipart/form-data" then all data fails to be update

Here's an error adding "content-type:multipart/form-data"

exception: "Illuminate\Database\QueryException" file: "D:\magang\serverapi\vendor\laravel\framework\src\Illuminate\Database\Connection.php" line: 678 message: "SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'namaproduk' cannot be null (SQL: update produkdatas set namaproduk = ?, deskripsi = ?, harga = ?, produkdatas.updated_at = 2021-04-09 01:50:07 where id = 13)" trace: [{file: "D:\magang\serverapi\vendor\laravel\framework\src\Illuminate\Database\Connection.php",…},…]

This issue is server-side in nature. Reading the excepting Integrity constraint violation: 1048 Column 'namaproduk' cannot be null You have a constraint in your DBMS preventing the column namaproduk from being null. Meaning that there is no data being added to that column. Add some data to that column and it will insert or change the column constraints to allow null by removing not null in the table definition. If that is your blob column, make sure that you are handling blobs correctly on the server-side — Marcello B.
– Marcello B., Commented Apr 9, 2021 at 2:19
I have tried, but the data that I will change to value becomes null after submitting it — dimas setiawan
– dimas setiawan, Commented Apr 9, 2021 at 2:41
This is a server-side issue, not an Axios or Vue one. This issue stems from trying to insert a blob incorrectly into whatever database you are using. Here is an example for PHP and Mysql phppot.com/php/mysql-blob-using-php — Marcello B.
– Marcello B., Commented Apr 9, 2021 at 2:43

Alexandr Blyakher · Accepted Answer · 2021-04-09 05:44:24Z

Hello there are working example of file input for 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>

Collectives™ on Stack Overflow

image cannot update on vue js with axios

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related