Cara melaksanakan fungsi muat naik dan pratonton imej dalam dokumen Vue

Vue ialah rangka kerja bahagian hadapan berdasarkan corak MVVM, yang memudahkan pembangunan web melalui pengikatan data dan komponenisasi. Dalam proses pembangunan Vue, keperluan yang berkaitan dengan muat naik dan pratonton imej adalah agak biasa. Artikel ini akan memperkenalkan kaedah pelaksanaan fungsi berkaitan dalam dokumen Vue tentang muat naik imej dan pratonton.

Pertama sekali, anda perlu memperkenalkan perpustakaan axios dan elemen-ui ke dalam komponen Vue, kerana kedua-dua perpustakaan ini diperlukan semasa memuat naik imej.

import axios from 'axios'
import { Message } from 'element-ui'

Seterusnya, tentukan fungsi untuk memuat naik imej:

uploadImage(file) {
  let formData = new FormData()
  formData.append('file', file)
  return axios.post('/upload', formData)
    .then(res => {
      if (res.data.code === 0) {
        return Promise.resolve(res.data.data)
      } else {
        return Promise.reject(res.data.msg)
      }
    }).catch(err => {
      Message.error('图片上传失败！')
      return Promise.reject(err)
    })
}

Dalam fungsi ini, muat naik fail ke pelayan melalui kaedah pos axios, dan kembalikan data sebagai Janji selepas muat naik adalah berjaya. Jika muat naik gagal, mesej ralat dipaparkan.

Berikut ialah kod fungsi untuk pratonton imej:

previewImage(file, cb) {
  if (!file) {
    return
  }
  if (typeof FileReader === 'undefined') {
    Message.warning('您的浏览器不支持图片预览')
    return
  }
  let reader = new FileReader()
  reader.onload = function(e) {
    cb(e.target.result)
  }
  reader.readAsDataURL(file)
}

Dalam fungsi ini, fungsi pratonton imej dilaksanakan melalui objek FileReader. Apabila membaca fail, URL imej pratonton dikembalikan sebagai parameter melalui fungsi panggil balik cb.

Akhir sekali, gunakan dua fungsi ini dalam komponen Vue untuk melaksanakan fungsi muat naik dan pratonton imej:

<template>
  <div class="upload">
    <el-upload
      class="avatar-uploader"
      :action="serverUrl"
      :show-file-list="false"
      :on-success="handleSuccess"
      :before-upload="beforeUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        imageUrl: ''
      }
    },
    methods: {
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isPNG = file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG && !isPNG) {
          this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
          return false
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
          return false
        }
        this.previewImage(file, (url) => {
          this.imageUrl = url
        })
      },
      handleSuccess(response) {
        this.$emit('update:avatar_url', response.fileUrl)
      }
    }
  }
</script>

Dalam contoh ini, kami menggunakan komponen Muat Naik elemen-ui untuk melaksanakan Muat Naik imej fungsi, dan gunakan fungsi beforeUpload untuk mengesahkan sama ada fail yang dimuat naik memenuhi keperluan (mesti dalam format JPG/PNG dan tidak boleh melebihi saiz 2MB Jika pengesahan lulus, fungsi imej pratonton dipanggil untuk pratonton fail). Selepas muat naik berjaya, alamat URL yang dikembalikan akan dihantar melalui acara untuk digunakan oleh komponen lain.

Ringkasnya, dengan menggunakan fungsi dan komponen di atas, fungsi muat naik dan pratonton imej dalam dokumen Vue boleh dilaksanakan dengan lebih mudah. Sudah tentu, dalam aplikasi sebenar, pelarasan dan pengoptimuman yang sepadan perlu dibuat mengikut keperluan perniagaan tertentu.

Atas ialah kandungan terperinci Cara melaksanakan fungsi muat naik dan pratonton imej dalam dokumen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!