upload file

upload-file

使用element-ui的upload組件實現上傳圖片至七牛雲

工程要求

1. vue2.4 + express4.14 + es6
2. node版本在4.0以上(建議使用nvm 來管理node版本)
3. 程式碼風格檢查standardjs

工程依賴

1. qiniu
2. element-ui

安裝依賴

npm install

啟動工程

1. 工程端口8080
2. 融合模式啟動

npm start

注意: 此模式下啟動即可上傳文件

3. nodemon模式啟動

npm run nodemon

流程

1. 後端配置公鑰、私鑰和儲存空間名
2. 後端建置上傳上傳原則用以產生uploadToken
3. 後端暴露api返回uploadToken
4. 前端上傳檔案前先呼叫後端api取得uploadToken
5. 前端成功上傳圖片，取得七牛回傳的圖片地址

七牛

1. 直傳文件
2. 上傳憑證
3. Node.js SDK

後端

1. code

   附註：啟動專案前先將accessKey、secretKey、bucketName等參數替換成七牛為您提供的對應參數

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. code

   註：具體文件��參考element-ui upload�