nodejs+vue结合七牛云实现图片上传

1.这部分是前端的

主要修改七牛云的外链以及 domain的值

//1.html代码
<div class="upload"><el-uploadclass="avatar-uploader":action= domain:http-request = upqiniu:show-file-list="false":before-upload="beforeUpload"><img v-if="imageUrl" :src="data:imageUrl" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload>
</div>

//2.js代码imageUrl: '',token: {},// 七牛云的上传地址，根据本身所在地区选择，我这里是华南区domain: 'https://up-z2.qiniup.com',// 这是七牛云空间的外链默认域名qiniuaddr: 'rb1db201j.hn-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// 从后端获取上传凭证tokenaxios.get('http://127.0.0.1:3000/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)// 获取到凭证以后再将文件上传到七牛云空间axios.post(this.domain, formdata, config).then(res => {this.imageUrl = 'http://' + this.qiniuaddr + '/' + res.data.keyconsole.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}

//3.css代码.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;
}

2.后台建一个qiniu.js

开始记得 npm 一个七牛云具体代码不太记得了（可以手动百度一下）

let qiniu = require('qiniu'),
let express = require('express');let ak = '这里是你们的ak'
let sk = '你们的sk'const mac = new qiniu.auth.digest.Mac(ak, sk)
const options = {scope: 'uuto',         //对象存储空间名字expires: 7200
}
const putPolicy = new qiniu.rs.PutPolicy(options)
const uploadToken = putPolicy.uploadToken(mac)module.exports = {uploadToken
}

开一个接口给前端请求

const qnconfig = require('../router/qiniu.js')
var express = require('express');
var router = express.Router();router.get('/upload', (req, res, next) => {const token = qnconfig.uploadTokenconsole.log(token);res.send({status: 1,message: '上传凭证获取成功',upToken: token,})
})
module.exports = router;

nodejs+vue结合七牛云实现图片上传相关推荐

springboot+vue+element+七牛云+实现图片上传功能
注册七牛云链接地址: https://www.qiniu.com/products/kodo,免费有10G空间与免费一个月的域名地址注册后,开启对象存储,创建空间选择地区, 上传方式: 1:前端现将 ...
SpringMvc+饿了么UI组件+七牛云做图片上传
前言我之前也有用过SpringBoot+OSS做过云存储,可以去看我的文章https://blog.csdn.net/Curtisjia/article/details/109339980,当时我做 ...
微服务电商实战(十一)搭建vue项目对接注册登陆接口，解决跨域问题，使用七牛云实现头像上传
一.简介 node.js版本:v12.16.3 node.js下载 vue官网教程 iview介绍上传头像接口,图片存储在七牛云中,注册并实名认证之后可以免费使用以下会描述使用vue搭建项目框架的 ...
SpringBoot(24) 整合七牛云实现文件上传
一.前言本文将基于springboot2.1.8.RELEASE整合七牛云实现文件上传本文参考 https://www.keppel.fun/articles/2019/02/27/1551262 ...
（七牛云系列）七牛云指定文件上传路径（各种语言通用）
目录解决方法一个实例解决方法方法很简单假如你有一个文件名为xxx.jpg 同时你在七牛云中有一个文件夹为cs 则你在上传文件时,需要将文件名修改为cs/xxx.jpg,七牛云会自动识别,并放 ...
七牛云配置 koa 上传文件到七牛云
一.七牛云配置七牛官网 1.创建七牛存储空间 2.空间添加备案的域名 (若是测试空间可不需要配置) 3.解析CNAME 添加域名后会有CNAME(别名记录),需要将它解析到你的备案域名下链接-CN ...
一步步带你实现一个简单的express服务器，能让vue通过axios请求将图片上传到阿里云OSS
文章目录前言一.申请阿里云OSS 二.Vue前端读取图片三.将图片base64转成二进制文件四.搭建express服务器五.通过axios给服务器发送请求六.发送图片并上传阿里云我们首先 ...
vue项目中的h5图片上传（处理上传的时候图片被旋转的问题，并压缩图片大小）
vue的图片上传这个页面实现的主要是实现创建球队功能,里面包含队徽,球队类型,球队名称,所属地址这里除了图片上传还有一个地址的三级联动功能,这里我把这个页面都贴上来了.这个项目中使用vux作为ui ...
SSM项目/SpringBoot项目/SpringBoot+Vue前后端分离项目图片上传并查看功能实现汇总
SSM项目下的图片上传: 1.前端Js代码:用户点击"上传头像"按钮后,会执行uploadPhoto()的方法. <button type="button" ...
Vue+SpringBoot+OSS+element实现图片上传服务器+图片展示墙
1.技术选型: (1)Vue(前端) (2)Element(上传图片组件) (3)SpringBoot(后端) (4)Mybatis(数据库操作) (3)OSS(阿里云存储服务器) 2.实现效果概述: ...

nodejs+vue结合七牛云实现图片上传

nodejs+vue结合七牛云实现图片上传相关推荐

最新文章

热门文章