看了几天七牛云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/…
