-
第一种实现方式
实现思路:后端写接口给前端获得token,前端获得凭证后将图片上传到七牛云,并获得返回的图片url地址。
首先要注册七牛云:https://portal.qiniu.com/signup?code=3layyygwwtrv6
注册完之后要认证,上传身份证正反面就可以
之后创建对象存储空间,得到存储空间的名字
再从个人中心==》密钥管理==》找到你的ak、sk,
下面的代码是参考这个文档的https://developer.qiniu.com/kodo/sdk/1289/nodejs
1、后端写的接口
//config.js
const qiniu = require('qiniu')
// 创建上传凭证
const accessKey = '' //accessKey
const secretKey = '' //secretKey
const mac = new qiniu.auth.digest.Mac(accessKey, secretKey)
const options = {
scope: '', //对象存储空间名字
expires: 7200
}
const putPolicy = new qiniu.rs.PutPolicy(options)
const uploadToken = putPolicy.uploadToken(mac)
module.exports = {
uploadToken
}
2、写一个接口
//upload.js
const qnconfig = require('../config.js')
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', (req, res, next) => {
const token = qnconfig.uploadToken
res.send({
status: 1,
message: '上传凭证获取成功',
upToken: token,
})
})
module.exports = router;
具体的服务启动就不说了,已经写过这个的人,说明是有点node基础的
3、前端调用接口并且将图片上传到七牛云(下面我用的是element的上传插件,我从项目里拷贝过来的)
下面的domain是根据你创建存储空间选择的地区来填的,
文档在这里:https://developer.qiniu.com/kodo/manual/1671/region-endpoint
以及要填入你的外链默认域名
<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://up.qiniup.com',
// 这是七牛云空间的外链默认域名
qiniuaddr: ''
}
},
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 = 'dfairy' + Date.parse(new Date()) + Math.floor(Math.random() * 100) + '.' + filetype
// 从后端获取上传凭证token
this.axios.get('/api/upload').then(res => {
console.log(res)
const formdata = new FormData()
formdata.append('file', req.file)
formdata.append('token', res.data.upToken)
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>