看了几天七牛云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 initnpm 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: {// PathsassetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {'/up': {target: 'http://localhost:3000',changeOrigin: true,pathRewrite: {'^/up': '/'}}},
5、 写upload.vue
代码比较简单,基本从element-ui 官网拷贝过来就可以用了
<template><!-- upload --><div class="upload"><el-uploadclass="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-',// 这是七牛云空间的外链默认域名qiniuaddr: 'p3z6q1uw1.'}},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// 从后端获取上传凭证tokenthis.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 < 2if (!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: /lyttonlee/...