1.vue用elemnet图片上传组件前端代码 和后端代码
vue2的上传方式和vue3的一样
用element unload 组件
<el-upload
class="avatar-uploader"
:action= domain
:http-request = upqiniu
:show-file-list="false"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
然后用到定义方法
data () {
return {
imageUrl: '',
token: {},
// 七牛云的上传地址,根据自己所在地区选择,我这里是华南区
domain: 'http://upload-z1.qiniup.com',
// 这是七牛云空间的外链默认域名
qiniuaddr: 'rr56s8jzk.hb-bkt.clouddn.com'
}
},
最后 调用方法可以上传到七牛云了
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
axios.get('http://127.0.0.1:4000/token').then(res => {
console.log(res)
const formdata = new FormData()
formdata.append('file', req.file)
formdata.append('token', res.data)
formdata.append('key', keyname)
// 获取到凭证之后再将文件上传到七牛云空间
axios.post(this.domain,formdata,config).then(res => {
console.log(res);
this.imageUrl = 'http://' + this.qiniuaddr + '/' + res.data.key
})
})
},
2.后端node代码
当然你先得 npm i qiniu然后才可以使用~
框架用的是express ,这部分就不讲了。
app.js中
// 引入包
const express = require('express')
const bodyparse = require('body-parser')
// 创建服务
const app = express()
// 解析数据
const cors = require('cors')
app.use(cors())
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(4000, () => {
console.log('启动3000!')
})
/*
七牛云配置
*/
const qiniu = require('qiniu')
// 创建上传凭证
const accessKey = 'kYpsrVjS8dDvRoLH42lR7pyicW7-1DEoFhvlMRzf' //这里填写七牛云的accessKey,我用*代替
const secretKey = 'fRrF6UEyKSCRuTQZC9TdImH3rUxibjv5yVwFgMxz'
const mac = new qiniu.auth.digest.Mac(accessKey, secretKey)
const options = {
scope: 'imgcun',//这里填写七牛云空间名称
expires: 7200
}
const putPolicy = new qiniu.rs.PutPolicy(options)
const uploadToken = putPolicy.uploadToken(mac)
module.exports = {
uploadToken
}
这样就可以了