Detaillierte Erläuterung der Upload-Komponente von vue Alibaba Cloud

In diesem Artikel wird hauptsächlich die Verwendung der Web-Direktübertragung zum Hochladen von Alibaba Cloud OSS-Bildern im Vue-Projekt vorgestellt. Standardmäßig verfügen die Leser über ein gewisses Verständnis des Vue-Frameworks und des Alibaba Cloud OSS SDK -> Upload-Client initialisieren -> Dateiauswahl für Upload -> Upload-Ergebnisse verteilen

1. In diesem Artikel wird das Alibaba Cloud SDK in Form von js verwendet. Die Verwendung der npm-Form des SDK erfordert einige Back-End-Knotenfunktionen und kann nicht für die direkte Webübertragung verwendet werden.

Sie können Skript-Tags direkt im HTML hinzufügen

In der Komponente habe ich eine asynchrone Methode gepackt, um das SDK zu erhalten, LoadJS. Wenn Sie interessiert sind, können Sie einen Blick darauf werfen

<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.3.0.min.js"></script>

2 Bei der Verwendung des SDK in Form einer JS-Einführung liegt ein asynchrones Problem vor, das heißt, das SDK wird möglicherweise nicht geladen, wenn der Client in der Mount-Hook-Funktion von Vue eingestellt wird. und initialisieren Sie den Client, nachdem das SDK geladen wurde.

3 Wenn sich Ihr Projekt in einer https-Umgebung befindet, müssen Sie sicherstellen, dass „secure“ beim Initialisieren des Clients als „true“ konfiguriert ist, andernfalls kann dies nicht der Fall sein hochgeladen

let timer = setInterval(() => {
  if (window.OSS) {
    this.init()
    clearInterval(timer)
    timer = null
    this.debug && window.console.log('阿里云oss初始化完成')
  } else {
    this.debug && window.console.log('阿里云oss初始化中...')
  }
}, 500)

4. Standardmäßig ist der Bildname eine zufällige Zeichenfolge, aber wenn dasselbe Bild mehrmals hochgeladen wird, werden mehrere identische Bilder gespeichert. Hier habe ich eine Optimierung vorgenommen und die Größe und Höhe zusammengefügt und Breite des Bildes in eine Zeichenfolge, und dann diese Die Zeichenfolge wird MD5-gehasht, sodass nach mehrmaligem Hochladen nur ein Bild gespeichert wird

Verwandte Empfehlungen:

Eine kurze Diskussion über das Kernarchitekturdesign der Upload-Komponente

PHP-Komponente zum Hochladen mehrerer Dateien_PHP-Tutorial

So verwenden Sie den JS-Upload Komponente FileUpload benutzerdefinierte template_javascript skills

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Upload-Komponente von vue Alibaba Cloud. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!