Heim Web-Frontend View.js So implementieren Sie Bild-Upload- und Vorschaufunktionen in Vue-Dokumenten

So implementieren Sie Bild-Upload- und Vorschaufunktionen in Vue-Dokumenten

Jun 20, 2023 am 09:22 AM
vue 图片上传 预览函数

Vue ist ein Front-End-Framework, das auf dem MVVM-Muster basiert und die Webentwicklung durch Datenbindung und Komponentisierung vereinfacht. Im Entwicklungsprozess von Vue sind die Anforderungen im Zusammenhang mit dem Hochladen und der Vorschau von Bildern relativ häufig. In diesem Artikel werden die Implementierungsmethoden verwandter Funktionen in Vue-Dokumenten zum Hochladen und zur Vorschau von Bildern vorgestellt.

Zunächst müssen Sie die Axios- und Element-UI-Bibliotheken in die Vue-Komponente einführen, da diese beiden Bibliotheken beim Hochladen von Bildern benötigt werden.

import axios from 'axios'
import { Message } from 'element-ui'
Nach dem Login kopieren

Als nächstes definieren Sie eine Funktion zum Hochladen von Bildern:

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)
    })
}
Nach dem Login kopieren

In dieser Funktion laden Sie die Datei über die Post-Methode von Axios auf den Server hoch und geben die Daten nach erfolgreichem Hochladen als Promise zurück. Wenn der Upload fehlschlägt, wird eine Fehlermeldung angezeigt.

Das Folgende ist der Funktionscode für die Vorschau von Bildern:

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)
}
Nach dem Login kopieren

In dieser Funktion wird die Bildvorschaufunktion über das FileReader-Objekt implementiert. Beim Lesen der Datei wird über die Callback-Funktion cb die URL des Vorschaubildes als Parameter zurückgegeben.

Verwenden Sie abschließend diese beiden Funktionen in der Vue-Komponente, um die Bild-Upload- und Vorschau-Funktionen zu implementieren:

<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>
Nach dem Login kopieren

In diesem Beispiel verwenden wir die Upload-Komponente von element-ui, um die Bild-Upload-Funktion zu implementieren, und verwenden die Funktion beforeUpload Überprüfen Sie, ob die hochgeladene Datei die Anforderungen erfüllt (muss im JPG/PNG-Format vorliegen und darf nicht größer als 2 MB sein). Wenn die Überprüfung erfolgreich ist, wird die Vorschaubildfunktion aufgerufen, um eine Vorschau der Datei anzuzeigen. Nachdem der Upload erfolgreich war, wird die zurückgegebene URL-Adresse zur Verwendung durch andere Komponenten durch das Ereignis geleitet.

Zusammenfassend lässt sich sagen, dass durch die Verwendung der oben genannten Funktionen und Komponenten die Bild-Upload- und Vorschaufunktionen im Vue-Dokument einfacher implementiert werden können. Natürlich müssen in tatsächlichen Anwendungen entsprechende Anpassungen und Optimierungen entsprechend den spezifischen Geschäftsanforderungen vorgenommen werden.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Bild-Upload- und Vorschaufunktionen in Vue-Dokumenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So verwenden Sie Echarts in Vue So verwenden Sie Echarts in Vue May 09, 2024 pm 04:24 PM

So verwenden Sie Echarts in Vue

Die Rolle des Exportstandards in Vue Die Rolle des Exportstandards in Vue May 09, 2024 pm 06:48 PM

Die Rolle des Exportstandards in Vue

So verwenden Sie die Kartenfunktion in Vue So verwenden Sie die Kartenfunktion in Vue May 09, 2024 pm 06:54 PM

So verwenden Sie die Kartenfunktion in Vue

Der Unterschied zwischen Event und $event in Vue Der Unterschied zwischen Event und $event in Vue May 08, 2024 pm 04:42 PM

Der Unterschied zwischen Event und $event in Vue

Die Rolle von Onmount in Vue Die Rolle von Onmount in Vue May 09, 2024 pm 02:51 PM

Die Rolle von Onmount in Vue

Der Unterschied zwischen Export und Exportstandard in Vue Der Unterschied zwischen Export und Exportstandard in Vue May 08, 2024 pm 05:27 PM

Der Unterschied zwischen Export und Exportstandard in Vue

Onmount in Vue entspricht dem Lebenszyklus der Reaktion Onmount in Vue entspricht dem Lebenszyklus der Reaktion May 09, 2024 pm 01:42 PM

Onmount in Vue entspricht dem Lebenszyklus der Reaktion

Was sind Hooks in Vue Was sind Hooks in Vue May 09, 2024 pm 06:33 PM

Was sind Hooks in Vue

See all articles