Bagaimana untuk melaksanakan fungsi muat naik fail dalam Vue?

Vue kini merupakan salah satu rangka kerja paling popular untuk pembangunan bahagian hadapan, dan caranya melaksanakan fungsi muat naik fail juga sangat mudah dan elegan. Artikel ini akan memperkenalkan cara untuk melaksanakan fungsi muat naik fail dalam Vue.

1. Bahagian HTML

Tambahkan kod berikut dalam fail HTML untuk membuat borang muat naik:

<template>
  <div>
    <form ref="uploadForm" 
          enctype="multipart/form-data" 
          class="upload-form" 
          @submit.prevent="submitFile">
      <input type="file" 
             name="file" 
             id="file" 
             class="input-file"
             ref="file"
             @change="handleFileChange" />
      <label for="file" class="btn">选择文件</label>
      <!-- 进度条展示 -->
      <p v-if="showProgress">上传进度：{{ percent }} %</p>
      <button type="submit" 
              class="upload-btn" 
              :disabled="!selectedFile">上传</button>
    </form>
  </div>
</template>

Dalam kod di atas, gunakan teg borang dan input untuk mencipta borang muat naik. Atribut nama dalam borang muat naik menentukan nama medan fail dalam borang. Atribut enctype menunjukkan jenis fail yang akan dimuat naik Jenis data berbilang bahagian/bentuk digunakan di sini.

Gunakan acara @click.prevent dalam teg label untuk mencetuskan peristiwa klik pada teg input untuk muncul kotak pemilihan fail. Acara @change di sini boleh mendengar pemilihan fail dan memanggil kaedah handleFileChange untuk mengemas kini nama fail dalam borang.

2. Bahagian JavaScript

Dalam fail JavaScript, kami perlu menggunakan komponen tersuai Vue.js dan pustaka axios untuk melaksanakan muat naik fail.

<script>
import axios from 'axios';

export default {
  data () {
    return {
      selectedFile: null,  // 选中的文件
      showProgress: false,  // 是否展示上传进度条
      percent: 0,    // 上传进度百分比
    }
  },
  methods: {
    handleFileChange (event) {
      this.selectedFile = event.target.files[0];
    },
    submitFile () {
      if (!this.selectedFile) return;
      // 新建 from 对象
      const formData = new FormData();
      formData.append('file', this.selectedFile, this.selectedFile.name);

      this.showProgress = true;
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: progressEvent => {
          // 计算上传进度百分比
          this.percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
        },
      };
      axios.post('/api/upload', formData, config)
        .then((response) => {
          console.log(response);
          this.showProgress = false;  // 移除 progress 条
        })
        .catch((error) => {
          console.log(error);
          this.showProgress = false;
        });
    },
  },
};
</script>

Tentukan kaedah handleFileChange() dan submitFile() dalam kaedah untuk mengendalikan pemilihan dan muat naik fail:

• kaedah handleFileChange mendengar acara pemilihan fail dan menyimpan fail yang dipilih.
• Kaedah submitFile menentukan sama ada fail yang dipilih wujud, dan kembali terus jika ia tidak wujud. Gunakan FormData() baharu untuk membina borang, dan tambahkan fail yang dipilih pada borang melalui kaedah tambah Ambil perhatian bahawa parameter ketiga ialah nama fail. axios.post menentukan API untuk memuat naik fail melalui parameter rentetan Data yang diminta untuk muat naik ialah objek formData Atribut Jenis Kandungan dalam Pengepala menentukan jenis data berbilang bahagian/jenis data digunakan di sini dipantau melalui acara onUploadProgress untuk mencapai paparan dinamik bar kemajuan.

Dalam kod di atas, kami menggunakan perpustakaan axios untuk menyelesaikan operasi muat naik fail. Tambahkan kebergantungan axios dalam fail package.json projek bahagian hadapan:

"axios": "^0.19.2"

Perkenalkan dan gunakannya melalui import axios daripada 'axios';. Dalam API bahagian belakang, gunakan pustaka Multer untuk mengendalikan muat naik fail. Multer ialah pustaka Node.js yang mengendalikan muat naik fail, Multer boleh memproses fail dan menghantarnya bersama-sama dengan borang.

3. Bahagian API bahagian belakang

const express = require('express');
const multer = require('multer');
const fs = require('fs');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/api/upload', upload.single('file'), (req, res) => {
  const file = req.file;
  if (!file) {
    const error = new Error('Please upload a file');
    error.httpStatusCode = 400;
    return next(error);
  }
  // 文件重命名
  const oldPath = file.path;
  const newPath = 'uploads/' + file.originalname;
  fs.rename(oldPath, newPath, (err) => {
    if (err) {
      console.error(err);
    }
  });
  res.send('File uploaded successfully');
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

menentukan nama medan fail yang dimuat naik melalui kaedah tunggal Multer juga menyediakan kaedah lain untuk operasi seperti muat naik berbilang fail dan sekatan jenis fail. Selepas muat naik selesai, kami akan mengalihkan fail dari laluan awal ke direktori muat naik Operasi menamakan semula fail boleh menjadikan nama itu unik dan mengelak daripada menulis ganti dengan memuat naik nama fail yang berbeza.

Dalam kod di atas, kami menggunakan perpustakaan ekspres untuk mencipta aplikasi pelayan Node.js. Tambahkan kebergantungan berikut pada fail package.json dalam projek latar belakang:

"express": "^4.17.1",
"multer": "^1.4.2"

Gunakan pernyataan import / memerlukan untuk memperkenalkan dan menggunakan modul yang sepadan.

4. Pengendalian pengecualian

Semasa proses muat naik fail, situasi tidak normal mungkin berlaku, seperti saiz fail melebihi had, jenis fail tidak dibenarkan, tamat masa rangkaian, ralat pelayan dan faktor lain Kami perlu menulis klien dan perkhidmatan yang sepadan pengendali pengecualian pada akhirnya.

Di bahagian pelanggan, memandangkan kami menggunakan perpustakaan axios, kami boleh terus menggunakan kaedah then and catch untuk memproses objek Promise yang dikembalikan oleh permintaan muat naik, dan mengendalikan operasi apabila muat naik masing-masing berjaya dan gagal. Dalam kod yang disediakan dalam artikel ini, kami menggunakan Promise.catch() untuk mengendalikan pengecualian semasa pelaksanaan proses. Di sisi pelayan, pengecualian yang berbeza memerlukan pengendalian yang berbeza berdasarkan situasi sebenar.

5. Ringkasan

Dalam artikel ini, kami memperkenalkan cara menggunakan Vue.js untuk melengkapkan operasi muat naik fail, termasuk pemilihan fail bahagian hadapan dan paparan dinamik bar kemajuan semasa proses muat naik, serta penulisan API latar belakang, dan pada masa yang sama, kemungkinan masalah semasa proses muat naik Pengecualian yang berlaku telah dikendalikan.

Fungsi muat naik fail merupakan ciri yang sangat diperlukan dalam banyak aplikasi web Menggunakan perpustakaan axios dan perpustakaan Multer dalam Vue.js boleh mencapai proses muat naik yang mudah dan elegan.

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