Panduan lengkap untuk melaksanakan muat naik fail dalam Vue (axios, element-ui)

Panduan lengkap untuk melaksanakan muat naik fail dalam Vue (axios, element-ui)

Dalam aplikasi web moden, muat naik fail telah menjadi fungsi asas. Sama ada memuat naik avatar, gambar, dokumen atau video, kami memerlukan cara yang boleh dipercayai untuk memuat naik fail dari komputer pengguna ke pelayan.

Artikel ini akan memberikan anda panduan terperinci tentang cara menggunakan Vue, axios dan element-ui untuk melaksanakan muat naik fail.

1. Apakah axios

axios ialah klien HTTP berasaskan janji untuk penyemak imbas dan node.js. Ia menyokong semua pelayar moden serta IE8 dan ke atas. Selain itu, axios secara elegan mengendalikan banyak permintaan XHR biasa dan banyak butiran API. Kami boleh melaksanakan fungsi muat naik fail kami dengan mudah menggunakan axios.

2. Buat halaman asas dan borang dengan elemen-ui

Mula-mula, mari buat halaman dan borang asas. Kami akan menggunakan elemen-ui untuk membina borang ringkas dan mengumpul fail yang dimuat naik pengguna.

<template>
  <div class="upload-form">
    <el-upload :action="serverUrl" :on-success="uploadSuccess" :headers="headers"
               :before-upload="beforeUpload" :on-error="uploadError">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="upload-tip">只能上传jpg/png文件，且不超过2MB</div>
    </el-upload>
  </div>
</template>

<script>
export default {
  data () {
    return {
      serverUrl: '/api/upload',
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }
  },
  methods: {
    beforeUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    uploadSuccess (response) {
      console.log(response.data)
      this.$message.success('头像上传成功!')
    },
    uploadError (error) {
      console.log(error)
      this.$message.error('上传头像图片失败!')
    }
  }
}
</script>

<style scoped>
.upload-form {
  margin-top: 20px;
  text-align: center;
}
.upload-tip {
  margin-top: 10px;
  color: #999;
}
</style>

Di sini, kami menggunakan komponen muat naik elemen-ui untuk menentukan beberapa tetapan dan acara berkaitan muat naik. Apabila pengguna memilih fail dan mengklik butang muat naik, kami akan melakukan operasi berikut:

• Sebelum memuat naik, kami akan menyemak jenis dan saiz fail imej daripada objek fail yang diluluskan, jika ia tidak memenuhi keperluan Cegah muat naik dan paparkan mesej ralat kepada pengguna
• Apabila muat naik berjaya, kami akan mengeluarkan data respons dan menghantar mesej bahawa muat naik itu berjaya
• Apabila muat naik gagal, kami akan mengeluarkan ralat dan menghantar mesej ralat kepada pengguna.

3. Komponen Vue yang melaksanakan muat naik fail

Sekarang kami telah mencipta borang mudah untuk mengumpul fail yang dimuat naik oleh pengguna, seterusnya kami perlu memuat naik fail Muat naik kepada pelayan. Kami akan menggunakan axios untuk tugasan ini.

<template>
  <!-- 这里插入上一部分的代码 -->
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      serverUrl: '/api/upload',
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }
  },
  methods: {
    beforeUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    uploadSuccess (response) {
      console.log(response.data)
      this.$message.success('头像上传成功!')
    },
    uploadError (error) {
      console.log(error)
      this.$message.error('上传头像图片失败!')
    },
    uploadFile (file) {
      const formdata = new FormData()
      formdata.append('file', file)
      axios.post(this.serverUrl, formdata, {
        headers: this.headers
      }).then((response) => {
        this.uploadSuccess(response)
      }).catch((error) => {
        this.uploadError(error)
      })
    }
  }
}
</script>

<style scoped>
  <!-- 这里插入上一部分的代码 -->
</style>

Dalam kod di atas, kami memperkenalkan axios, dan kemudian, kami menentukan kaedah uploadFile untuk memuat naik fail. Dalam kaedah ini, kami mula-mula mencipta contoh FormData untuk menghantar fail ke pelayan bersama-sama dengan permintaan. Seterusnya, kami memanggil kaedah axios.post untuk memuat naik fail ke pelayan. Apabila respons berjaya atau gagal, kami akan memanggil fungsi respons yang sepadan untuk menghantar mesej kejayaan atau ralat kepada pengguna.

4. Menggunakan Komponen Muat Naik Fail dalam Aplikasi Vue

Sekarang kami telah mencipta komponen dengan fungsi muat naik, kami akan menyepadukannya ke dalam aplikasi Vue kami.

<template>
  <div>
    <NavigationBar /> <!-- 插入导航栏组件代码 -->
    <UploadForm /> <!-- 插入上传表单组件代码 -->
  </div>
</template>

<script>
import NavigationBar from './components/NavigationBar.vue'
import UploadForm from './components/UploadForm.vue'

export default {
  components: {
    NavigationBar,
    UploadForm
  }
}
</script>

Di sini kami memperkenalkan komponen NavigationBar dan UploadForm dan meletakkannya dalam templat komponen Vue utama.

5. Pelayan Belakang

Akhir sekali, kami memerlukan pelayan bahagian belakang untuk menerima fail yang dimuat naik dan menyimpannya pada pelayan. Di bawah ialah contoh pelayan Express yang mudah.

const express = require('express')
const bodyParser = require('body-parser')
const multer  = require('multer')
const app = express()

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

app.use(bodyParser.json())
app.use(bodyParser.urlencoded())

app.post('/api/upload', upload.single('file'), (req, res) => {
  console.log(req.file)
  res.status(200).json({
    success: true,
    message: 'File uploaded successfully!'
  })
})

app.listen(3000, () => {
  console.log('Server listening on port 3000')
})

Dalam pelayan Express ini, kami menggunakan multer middleware untuk menghuraikan fail yang dimuat naik dan menyimpannya dalam folder muat naik. Kami kemudian mengeluarkan maklumat fail yang dimuat naik dalam pengendali laluan dan menghantar respons kejayaan kepada pelanggan. Anda boleh memuat naik fail mengikut keperluan sebenar anda.

Ringkasan

Dalam artikel ini, kami meneroka cara menggunakan Vue, axios dan element-ui untuk mencipta aplikasi web dengan fungsi muat naik fail. Kami mempelajari cara menggunakan komponen muat naik elemen-ui untuk mengumpul fail yang dimuat naik pengguna dan menggunakan axios untuk memuat naik fail ke pelayan melalui HTTP. Pada masa yang sama, kami juga mempelajari cara membuat pelayan Express untuk menerima dan menghuraikan fail yang dimuat naik.

Ini ialah panduan terperinci dan komprehensif untuk membantu anda melaksanakan fungsi muat naik fail dalam aplikasi Vue anda. Jika anda mempunyai sebarang soalan atau pemikiran, sila tinggalkan di dalam komen!

Atas ialah kandungan terperinci Panduan lengkap untuk melaksanakan muat naik fail dalam Vue (axios, element-ui). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!