upload file

アップロードファイル

element-ui のアップロード コンポーネントを使用して写真を Qiniu Cloud にアップロードします

エンジニアリング要件

1. vue2.4 + Express4.14 + es6
2. ノードのバージョンは4.0以降です (ノードのバージョンを管理するには nvm を使用することをお勧めします)
3. コードスタイルチェックstandardjs

プロジェクトの依存関係

1. キニウ
2. 要素 ui

依存関係をインストールする

npm install

プロジェクトの開始

1. エンジニアリングポート8080
2. フュージョンモードが始まります

npm start

注: このモードでは、起動時にファイルをアップロードできます。

3. ノードモンモード起動

npm run nodemon

プロセス

1. バックエンド構成の公開キー、秘密キー、およびストレージスペース名
2. バックエンドはアップロード戦略を構築して、uploadToken を生成します。
3. バックエンド公開 API は、uploadToken を返します
4. フロントエンドにファイルをアップロードする前に、バックエンド API を呼び出して、uploadToken を取得します。
5. フロントエンドは画像を正常にアップロードし、Qiniu から返された画像アドレスを取得しました。

キニウ

1. 直接ファイル転送
2. 認証情報のアップロード
3. Node.js SDK

後部

1. コード

   注: プロジェクトを開始する前に、accessKey、secretKey、bucketName およびその他のパラメータを、Qiniu が提供する対応するパラメータに置き換えます。

2. インターフェースリクエストメソッド

 # 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 "
    }
}

フロントエンド

1. コード

   注: 特定のドキュメントについては、element-ui のアップロードを参照してください。