Tutorial asas VUE3: Gunakan pemalam Vue.js untuk merangkum komponen muat naik imej

Tutorial asas VUE3: Gunakan pemalam Vue.js untuk merangkum komponen muat naik imej

Vue.js ialah rangka kerja hadapan yang popular yang membolehkan pembangun mencipta aplikasi yang lebih cekap dan fleksibel dengan kod yang lebih sedikit program. Terutama selepas keluaran Vue.js 3, pengoptimuman dan penambahbaikannya telah menjadikan lebih ramai pembangun cenderung untuk menggunakannya. Artikel ini akan memperkenalkan cara menggunakan Vue.js 3 untuk merangkum pemalam komponen muat naik imej.

Sebelum anda bermula, anda perlu memastikan bahawa Vue.js dan Vue CLI dipasang. Jika ia belum dipasang lagi, anda boleh memasangnya dengan memasukkan arahan berikut dalam terminal:

npm install -g vue
npm install -g @vue/cli

Seterusnya, gunakan Vue CLI untuk mencipta projek baharu dan navigasi ke direktori akar projek dalam terminal :

vue create image-uploader
cd image-uploader

Pasang pemalam Vue.js dalam projek, gunakan arahan berikut:

npm install vue-upload-image --save

Dalam projek yang dibuat, anda boleh melihat direktori node_modules baharu, yang mengandungi vue-upload-image pemalam. Cipta komponen baharu ImageUploader.vue dalam akar projek dan salin kod berikut ke dalam komponen:

<template>
  <div>
    <label for="photo">Upload Image:</label>
    <input type="file" ref="fileInput" id="photo" name="photo" v-on:change="uploadImage">
    <img v-if="image" :src="image" style="max-width:100%">
  </div>
</template>

<script>
import { reactive } from 'vue';
import { uploadImage } from 'vue-upload-image';

export default {
  name: 'ImageUploader',
  setup() {
    const state = reactive({
      image: null,
    });

    const uploadImage = async () => {
      const res = await uploadImage(this.$refs.fileInput.files[0]);
      if (res.status === 200) {
        state.image = res.data.url;
      }
    };

    return { state, uploadImage };
  },
};
</script>

<style>
</style>

Dalam kod tersebut kami menggunakan komponen Vue.js bernama ImageUploader yang mengandungi A 2e1cf0710519d5598b1f0f14c36ba674 dan elemen d5fd7aea971a85678ba271703566ebfd digunakan untuk memilih fail imej yang perlu dimuat naik dan menggunakan pemalam vue-upload-image untuk menghantar permintaan POST untuk berkomunikasi dengan bahagian belakang. Selepas muat naik berjaya, fail imej yang dipilih dipaparkan. Sebelum menambah gaya, kami boleh menggunakan perintah npm run serve dalam terminal perancah vue cli kami untuk melihat komponen di alamat setempat yang sepadan.

Menggunakan

dalam komponen vue Untuk memanggil ImageUploader.vue dalam komponen, hanya import dan daftarkannya dalam komponen lain. Contohnya, tambahkan yang berikut dalam App.vue:

<template>
  <div class="container">
    <ImageUploader />
  </div>
</template>

<script>
import ImageUploader from './components/ImageUploader.vue';

export default {
  name: 'App',
  components: {
    ImageUploader,
  },
};
</script>

<style>
.container {
  max-width: 800px;
  margin: 0 auto;
}
</style>

Anda kini boleh menjalankan aplikasi menggunakan perintah npm run serve dan melihat aplikasi dalam http://localhost:8080 dalam penyemak imbas anda. Jika semuanya berjalan lancar, aplikasi akan mempunyai komponen yang dipanggil "ImageUploader" hadir di dalamnya dan imej boleh dimuat naik menggunakan komponen ini.

Akhir sekali, kami boleh menambah gaya untuk mempersembahkan komponen muat naik imej dengan lebih baik. Ubah suai ImageUploader.vue:

<template>
  <div class="image-uploader">
    <label for="photo" class="image-uploader__label">
      <svg class="image-uploader__icon" viewBox="0 0 24 24">
        <path d="M19.5 7H4.5C3.673 7 3 7.673 3 8.5v7c0 .827.673 1.5 1.5 1.5h15c.827 0 1.5-.673 1.5-1.5v-7c0-.827-.673-1.5-1.5-1.5zm-9.75 6.75l-3-3.75h2.25V8h1.5v2.25h2.25l-3 3.75zm8.25-4.5v3h-1.5v-3h-3V8h3V5.25h1.5V8h3v1.5h-3z"/>
      </svg>
      <span class="image-uploader__text">Choose a file</span>
    </label>
    <input type="file" ref="fileInput" class="image-uploader__input" id="photo" name="photo" v-on:change="uploadImage">
    <img v-if="state.image" :src="state.image" class="image-uploader__preview" />
  </div>
</template>

<script>
import { reactive } from 'vue';
import { uploadImage } from 'vue-upload-image';

export default {
  name: 'ImageUploader',
  setup() {
    const state = reactive({
      image: null,
    });

    const uploadImage = async () => {
      const res = await uploadImage(this.$refs.fileInput.files[0]);
      if (res.status === 200) {
        state.image = res.data.url;
      }
    };

    return { state, uploadImage };
  },
};
</script>

<style scoped>
.image-uploader {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-uploader__label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: #999;
  padding: 1rem;
  margin: 2rem 0;
  border: dashed 2px #ccc;
  border-radius: 4px;
}

.image-uploader__icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
  fill: currentColor;
}

.image-uploader__input {
  display: none;
}

.image-uploader__text {
  text-transform: uppercase;
}

.image-uploader__preview {
  margin-top: 2rem;
  max-width: 100%;
  border-radius: 4px;
}
</style>

Kini, gaya komponen muat naik imej kami telah ditambah, anda boleh menjalankan projek dan melihat kesannya. Ini adalah komponen muat naik imej yang sangat asas yang boleh anda ubah suai dan lanjutkan dalam kod mengikut keperluan anda sendiri. Selain itu, ciri dan penggunaan tambahan boleh didapati pada halaman GitHub pemalam di pautan: https://github.com/AlbertLucianto/vue-upload-image.

Ringkasan

Artikel ini memperkenalkan cara menggunakan Vue.js 3 dan pemalam vue-upload-image untuk merangkum komponen muat naik imej asas. Banyak ciri lain boleh ditambah pada komponen ini, seperti pengesahan, had saiz fail, pratonton dan banyak lagi. Gunakan tutorial ini untuk membantu anda mencapai pembangunan Vue.js yang lebih cekap dan berguna.

Atas ialah kandungan terperinci Tutorial asas VUE3: Gunakan pemalam Vue.js untuk merangkum komponen muat naik imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!