Heim > Artikel > Web-Frontend > 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
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.
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!