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 官网拷贝过来就可以用了

测试

首先打开localhost:8080

然后选择上传图片

成功返回图片了

看一下七牛云空间

多了一张刚刚上传的且已经重命名的图片

总结

只做了文件的上传操作，如果是要修改，下载的话，需要写更多了，凭证也不能写得这么简单，学习还是要多看文档和demo

github地址：

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