nodejs + vue + element 本地调用七牛上传图片

一、启动 nodejs 服务

① 新建并进入一个文件夹

② 文件夹里放入server.js文件

③ 文件夹中运行终端

js 复制代码
npm init
// 一路回车,然后
npm install qiniu

④ 运行这个js文件,启动服务

js 复制代码
node server.js

server.js

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项目中直接使用

html 复制代码
<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 等参数

相关推荐
工业甲酰苯胺6 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
谢尔登10 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js
然我11 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法
kk_stoper11 小时前
如何通过API查询实时能源期货价格
java·开发语言·javascript·数据结构·python·能源
晨枫阳11 小时前
前端VUE项目-day1
前端·javascript·vue.js
颜酱12 小时前
抽离ant-design后台的公共查询设置
前端·javascript·ant design
绅士玖12 小时前
JavaScript 设计模式之单例模式🚀
前端·javascript·设计模式
Dream耀12 小时前
useReducer:React界的"灭霸手套",一个dispatch搞定所有状态乱局
前端·javascript·react.js
余大侠在劈柴12 小时前
pdf.js 开发指南:在 Web 项目中集成 PDF 预览功能
前端·javascript·学习·pdf
拾光拾趣录13 小时前
JavaScript屏幕切换检测方案
前端·javascript