upload file

Upload-Datei

Verwenden Sie die Upload-Komponente von element-ui, um Bilder in die Qiniu Cloud hochzuladen

Technische Anforderungen

1. vue2.4 + express4.14 + es6
2. Die Knotenversion ist höher als 4.0 (es wird empfohlen, NVM zum Verwalten der Knotenversion zu verwenden).
3. Codestilprüfung standardjs

Projektabhängigkeiten

1. qiniu
2. element-ui

Abhängigkeiten installieren

npm install

Projekt starten

1. Engineering-Port 8080
2. Der Fusionsmodus startet

npm start

Hinweis: In diesem Modus können Dateien beim Start hochgeladen werden.

3. Start im Nodemon-Modus

npm run nodemon

Verfahren

1. Öffentlicher Schlüssel, privater Schlüssel und Speicherplatzname der Backend-Konfiguration
2. Das Backend erstellt die Upload-Upload-Strategie, um ein UploadToken zu generieren
3. Die im Backend verfügbar gemachte API gibt uploadToken zurück
4. Rufen Sie vor dem Hochladen von Dateien im Front-End die Back-End-API auf, um das UploadToken zu erhalten.
5. Das Frontend hat das Bild erfolgreich hochgeladen und die von Qiniu zurückgegebene Bildadresse erhalten

Qiniu

1. Direkte Dateiübertragung
2. Anmeldeinformationen hochladen
3. Node.js SDK

hinteres Ende

1. Code

   Hinweis: Ersetzen Sie vor Beginn des Projekts die Parameter accessKey, SecretKey, BucketName und andere durch die entsprechenden von Qiniu bereitgestellten Parameter.

2. Schnittstellenanforderungsmethode

 # request url
curl --request GET 
     --url ' http://localhost:8080/api/upload?fileName=123.png '

# body
{
    " code " : " 1 " ,
    " desc " : " ok " ,
    " result " : {
        " bucketName " : " bucket-name " ,
        " fileName " : " f90bad3c937d1dcdfc37.png " ,
        " uploadToken " : " JjO_ih1JuNJAKDT-cr5T10TSuBGyJf1 "
    }
}

Frontend

1. Code

   Hinweis: Spezifische Dokumente finden Sie unter element-ui upload.