Bagaimana untuk melaksanakan fungsi muat naik fail dalam vue (dua pilihan)

Vue ialah rangka kerja pembangunan bahagian hadapan yang sangat popular yang menyediakan banyak komponen dan alatan yang kaya untuk mempercepatkan pembangunan aplikasi web. Dalam pembangunan sebenar, kita sering perlu menggunakan Vue untuk melaksanakan fungsi memuat naik fail. Dalam artikel ini, kami akan memperkenalkan penyelesaian Vue untuk memuat naik fail.

Pilihan 1: Gunakan komponen pihak ketiga

Vue mempunyai banyak komponen pihak ketiga yang boleh digunakan untuk memuat naik fail, seperti vue-dropzone, vue-file-upload, vue-upload-component, dsb. . Komponen ini menyediakan API dan gaya yang kaya untuk memudahkan muat naik fail. Contoh berikut mengambil vue-upload-component sebagai contoh:

Pasang komponen

npm install vue-upload-component --save

Gunakan

<template>
  <div>
    <file-upload
      ref="upload"
      :extensions="[&#39;jpg&#39;, &#39;png&#39;, &#39;gif&#39;]"
      :headers="headers"
      :url="url"
      @input="onInputChange"
      @start="onUploadStart"
      @end="onUploadEnd"
      @before="onBeforeUpload"
      @success="onUploadSuccess"
      @error="onUploadError"
    >
      <template slot="before">选择文件</template>
      <template slot="drag">将文件拖拽到此区域上传</template>
    </file-upload>
  </div>
</template>

<script>
import FileUpload from "vue-upload-component";

export default {
  components: {
    FileUpload,
  },
  data() {
    return {
      headers: {
        Authorization: "Bearer " + token, // 根据实际情况设置token
      },
      url: "https://xxxx/upload", // 上传地址
    };
  },
  methods: {
    onUploadSuccess(response, file) {
      console.log(response, file);
    },
    onUploadError(err, response, file) {
      console.log(err, response, file);
    },
    onBeforeUpload(file) {
      console.log(file);
    },
    onUploadStart(file) {
      console.log(file);
    },
    onUploadEnd(file) {
      console.log(file);
    },
    onInputChange(file) {
      console.log(file);
    },
  },
};
</script>

dalam komponen dalam data() kita boleh tetapkan headers dan url yang dimuat naik. Komponen ini juga menyediakan banyak fungsi cangkuk yang boleh kita panggil mengikut keperluan sebenar. Contoh komponen boleh diperolehi melalui atribut ref untuk memanggil kaedah komponen, contohnya:

this.$refs.upload.active = true; // 开始上传

Pilihan 2: Gunakan axios untuk menghantar permintaan

Selain menggunakan komponen pihak ketiga untuk muat naik fail Selain itu, kami juga boleh menggunakan axios untuk menghantar permintaan untuk memuat naik fail. Contoh kod berikut menunjukkan cara memuat naik fail menggunakan axios:

Pasang axios

npm install axios --save

Kod melaksanakan

<template>
   <div>
      <input type="file" @change="onFileChange" />
   </div>
</template>

<script>
import axios from 'axios';

export default {
   methods: {
      onFileChange(event) {
         const url = 'https://xxxx/upload';
         const file = event.target.files[0];
         const formData = new FormData();
         formData.append('file', file);
         axios.post(url, formData, {
            headers: {
               Authorization: "Bearer " + token, // 根据实际情况设置token
            }
         })
         .then(res => {
            console.log(res.data);
         })
         .catch(err => {
            console.log(err);
         })
      }
   }
}
</script>

dengan mendapatkan nilai input type="file" elemen dan kemudian mencipta objek FormData yang menambah objek fail pada FormData. Akhir sekali, kami menggunakan axios untuk menghantar permintaan POST untuk memuat naik fail dan menambah atribut Authorization dalam pengepala permintaan untuk pengesahan.

Ringkasan

Vue menyediakan banyak komponen dan alatan yang mudah untuk melengkapkan fungsi muat naik fail. Kami boleh melaksanakannya dengan cepat dengan bantuan komponen pihak ketiga, atau kami boleh menggunakan axios untuk menghantar permintaan untuk memuat naik fail. Untuk memastikan keselamatan, kami mungkin perlu menambah pengesahan pada antara muka untuk memuat naik fail. Terima kasih kerana membaca artikel ini.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi muat naik fail dalam vue (dua pilihan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!