nodejs + vue + element 本地调用七牛上传图片
2023-12-13 04:47:07
一、启动 nodejs 服务
① 新建并进入一个文件夹
② 文件夹里放入server.js文件
③ 文件夹中运行终端
npm init
// 一路回车,然后
npm install qiniu
④ 运行这个js文件,启动服务
node server.js
server.js
const http = require('http');
const qiniu = require('qiniu');
const accessKey = "wmRbcjYA2******************"; // 填写你的七牛云accessKey,登陆七牛云官网右上角头像上点击密钥管理即可获取
const secretKey = "mLaAIYUG*******************"; // 填写你的七牛云secretKey
const bucket = "qiniuy****"; // 你创建的七牛云存储空间名称,创建流程:对象存储->空间管理->新建空间
http.createServer((req, res, next) => {
const mac = new qiniu.auth.digest.Mac(accessKey, secretKey); // 生成鉴权对象mac
const options = {
scope: bucket
};
const putPolicy = new qiniu.rs.PutPolicy(options);
const uploadToken = putPolicy.uploadToken(mac);
res.writeHead(200, {
'Access-Control-Allow-Origin': '*' // 允许跨域访问
});
res.end(uploadToken);
}).listen(1234, err => { // 监听本地的1234端口号
if (!err) {
console.log('server listen 1234');
} else {
console.log(err);
}
});
二、在vue项目中直接使用
<template>
<el-upload class="avatar-uploader" action="http://up-z2.qiniu.com/" :show-file-list="false"
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :data="postData">
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import axios from 'axios'
import type { UploadProps } from 'element-plus'
import * as qiniu from 'qiniu-js'
const imageUrl = ref('')
const postData = ref({
token: '',
key: '',
})
const handleAvatarSuccess: UploadProps['onSuccess'] = (
res,
uploadFile
) => {
// 你的专属七牛云外链地址
const url = `http://s4vm5*****.clouddn.com/${ res.key }`
imageUrl.value = url
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (file) => {
postData.value.key = `${new Date().getTime()}_${file.name}`
}
onMounted(() => {
// 拿到后端返回的token
axios.get('http://localhost:1234').then(res => {
console.log('token', res)
postData.value.token = res.data
})
})
</script>
<style scoped lang="scss">
.avatar-uploader .avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
text-align: center;
}
</style>
三、注意
① 上面的七牛云 cdn 要用 http,不能用 https ,因为我们的是测试域名,不能升级为 https ,也不能用 https 访问
② 要把私有空间改成公开空间,否则图片地址后面还应该带有 token 等参数
文章来源:https://blog.csdn.net/weixin_43951592/article/details/134823934
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!