vue前端(element-ui)，express後端實現上傳圖片到七牛雲

看了幾天七牛雲nodejs的SDK文檔，現在嘗試寫一個上傳文件到七牛雲的demo，不足之處請各位大佬指正！

實現思路

模擬前後端分離，後端向前端發送七牛雲的上傳憑證token，前端獲得憑證後將圖片上傳到七牛雲，並獲得返回的圖片url地址

步驟

1.需要些什麼？

既然要上傳文件到七牛雲，那我們至少需要一個七牛雲空間啊

註冊一個七牛雲賬號，然後綁定支付寶認證一下就OK了

完成之後先創建一個對象儲存空間，名字隨意

重點來了，這裏有幾項是要用到的
1、 空間名稱bucket, 我這裏就是 lytton
2、 SK 和 AK ,在控制面板的密匙管理
3、 儲存空間的外鏈域名，在儲存空間可以找到

AK 和 SK

外鏈域名

2、寫後端代碼

既然選擇使用vue，那就直接用vue-cli創建項目了

vue init webpack qiniuupload

├── build
├── config
├── index.html
├── node_modules
├── package.json
├── README.md
├── src
└── static

因爲要用到後端，所以在src 目錄裏面創建一個server來當後端，一個client來當前端用

lytton@lytton-ubuntu:~/桌面/demo/qiniuupload/src$ tree -L 1
.
├── App.vue
├── client
├── main.js
├── router
└── server

然後在server目錄下

npm init
npm i express qiniu --save

當然這個server的作用很簡單，就只做一件事，當前端請求要上傳圖片到七牛雲的時候，像前端發送一個上傳憑證的token

創建後端程序app.js

// 引入包
const express = require('express')
const bodyparse = require('body-parser')
// 創建服務
const app = express()
// 解析數據
app.use(bodyparse.json())
// 引入七牛雲配置
const qnconfig = require('./config.js')
// 處理請求
app.get('/token', (req, res, next) => {
  // console.log(qnconfig.uploadToken)
  res.status(200).send(qnconfig.uploadToken)
})
// 監聽3000端口
app.listen(3000, () => {
  console.log('this server are running on localhost:3000!')
})

創建config.js以用來生成上傳憑證

這裏就需要用到上面的bucket ,AK,SK

/*
七牛雲配置
*/
const qiniu = require('qiniu')

// 創建上傳憑證
const accessKey = 'YOXpF0XvM_3yVDsz5C-hWwrFE5rtDAUQC3XjBQEG'
const secretKey = 'CmrhUV2xHf1d8nPCsws9wwm7jKypCPA0lRVm-7lS'
const mac = new qiniu.auth.digest.Mac(accessKey, secretKey)
const options = {
  scope: 'lytton',
  expires: 7200
}
const putPolicy = new qiniu.rs.PutPolicy(options)
const uploadToken = putPolicy.uploadToken(mac)

module.exports = {
  uploadToken
}

server的目錄結構

lytton@lytton-ubuntu:~/桌面/demo/qiniuupload/src/server$ tree -L 1
.
├── app.js
├── config.js
├── node_modules
└── package.json

然後控制檯 nodemon app.js，當然如果沒裝nodemon的話，就 node app.js 一樣的

打開瀏覽器 localhost:3000

然後服務端就不用管了

3、寫前端代碼

首先在根目錄安裝element-ui axios

然後在main.js裏面引入

然後在client文件夾下面創建一個upload.vue
並在router裏面引入

import Vue from 'vue'
import Router from 'vue-router'
import UpLoad from '@/client/upload'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: UpLoad
    }
  ]
})

到這裏整體結構也就完成了，src 的目錄結構

lytton@lytton-ubuntu:~/桌面/demo/qiniuupload/src$ tree -L 2
.
├── App.vue
├── client
│   └── upload.vue
├── main.js
├── router
│   └── index.js
└── server
    ├── app.js
    ├── config.js
    ├── node_modules
    └── package.json

4、解決跨域問題

這裏前端向後端訪問屬於跨域訪問，前端是跑在8080端口的，後端是跑在3000端口的，所以首先要解決一下跨域問題

打開config文件夾下的index.js
添加跨域代理訪問

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/up': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/up': '/'
        }
      }
    },

5、 寫upload.vue

代碼比較簡單，基本從element-ui 官網拷貝過來就可以用了

<template>
  <!-- upload -->
  <div class="upload">
    <el-upload
      class="avatar-uploader"
      :action= domain
      :http-request = upqiniu
      :show-file-list="false"
      :before-upload="beforeUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>
<script>
export default {
  data () {
    return {
      imageUrl: '',
      token: {},
      // 七牛雲的上傳地址，根據自己所在地區選擇，我這裏是華南區
      domain: 'https://upload-z2.qiniup.com',
      // 這是七牛雲空間的外鏈默認域名
      qiniuaddr: 'p3z6q1uw1.bkt.clouddn.com'
    }
  },
  methods: {
    // 上傳文件到七牛雲
    upqiniu (req) {
      console.log(req)
      const config = {
        headers: {'Content-Type': 'multipart/form-data'}
      }
      let filetype = ''
      if (req.file.type === 'image/png') {
        filetype = 'png'
      } else {
        filetype = 'jpg'
      }
      // 重命名要上傳的文件
      const keyname = 'lytton' + new Date() + Math.floor(Math.random() * 100) + '.' + filetype
      // 從後端獲取上傳憑證token
      this.axios.get('/up/token').then(res => {
        console.log(res)
        const formdata = new FormData()
        formdata.append('file', req.file)
        formdata.append('token', res.data)
        formdata.append('key', keyname)
        // 獲取到憑證之後再將文件上傳到七牛雲空間
        this.axios.post(this.domain, formdata, config).then(res => {
          this.imageUrl = 'http://' + this.qiniuaddr + '/' + res.data.key
          // console.log(this.imageUrl)
        })
      })
    },
    // 驗證文件合法性
    beforeUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上傳頭像圖片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上傳頭像圖片大小不能超過 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>
<style scoped>
.upload {
  width: 600px;
  margin: 0 auto;
}
.avatar-uploader .el-upload {
  border: 5px dashed #ca1717 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

測試

首先打開localhost:8080

然後選擇上傳圖片

成功返回圖片了

看一下七牛雲空間

多了一張剛剛上傳的且已經重命名的圖片

總結

只做了文件的上傳操作，如果是要修改，下載的話，需要寫更多了，憑證也不能寫得這麼簡單，學習還是要多看文檔和demo

github地址：

github: https://github.com/lyttonlee/...