Muat naik imej dan simpan dalam folder awam dalam NuxtJs
P粉141911244
P粉141911244 2024-03-29 17:28:07
0
1
536

Bagaimana untuk membenarkan pengguna memuat naik img dan menyimpannya dalam folder awam?

Saya sedang membuat aplikasi mudah untuk membolehkan pengguna (pengurus restoran) memasukkan makanan baharu dan imejnya.

Saya membenarkan pengguna memuat naik img dengan borang dan saya perlu menyimpannya dalam folder awam projek Nuxt.

Maklumat makanan dimasukkan melalui kaedah $fecth dan POST, kemudian diekstrak daripada POST dan dimasukkan ke dalam pangkalan data

INSERT INTO menu (food_name, price, course ) 
        VALUES (?, ?, ?)`,
[plateName, platePrice, course]
FORM:
<input class="form-control" type="file" v-on:change="uploadImg()" id="formFile">
<label for="formFile" class="form-label">Add Image</label>
methods {
    uploadImg(){

        ???

    },
    addFood() {
      $fetch("/api/insert/", {
        method: "POST",
        body: {
            plateName: this.plateName,
            platePrice: this.platePrice,
            course: this.plateSelect,
            }
      })
      .then(() => window.location.href = "/inserimento")
      .catch((e) => alert(e))

    },

P粉141911244
P粉141911244

membalas semua(1)
P粉765570115

Ini bukan penyelesaian yang berdaya maju kerana pengguna akhir mungkin berkelakuan jahat dan menghantar pertanyaan spam. Jadi, penuhkan pelayan anda dan ranapkannya atau isikan keseluruhan cakera.

Perkara yang paling penting ialah ia tidak akan dioptimumkan, dilayan secara normal atau apa-apa lagi (tiada langkah penggabungan).
Sebaliknya, saya mengesyorkan agar anda memuat naiknya ke beberapa bahagian belakang, mengoptimumkannya (ini boleh dilakukan menggunakan perkhidmatan seperti Cloudinary) dan mengehoskannya pada AWS S3 atau yang serupa (sebaik-baiknya pada CDN).

Ini adalah penyelesaian yang lebih berskala, selamat dan tahan lama.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan