express实现上传图片到七牛云

第一种实现方式

实现思路：后端写接口给前端获得token，前端获得凭证后将图片上传到七牛云，并获得返回的图片url地址。

首先要注册七牛云：https://portal.qiniu.com/signup?code=3layyygwwtrv6

注册完之后要认证，上传身份证正反面就可以

之后创建对象存储空间，得到存储空间的名字

再从个人中心==》密钥管理==》找到你的ak、sk,

下面的代码是参考这个文档的https://developer.qiniu.com/kodo/sdk/1289/nodejs

1、后端写的接口

//config.jsconst 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.jsconst qnconfig = require('../config.js')
var express = require('express');
var router = express.Router();/* GET home page. */router.get('/', (req, res, next) => {const token = qnconfig.uploadTokenres.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-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>
</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// 从后端获取上传凭证tokenthis.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 < 2if (!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>

express实现上传图片到七牛云相关推荐

微信小程序上传图片到七牛云
七牛云上传图片第一次用七牛云,目的是存储一些图片 1.首先是七牛云的注册,很简单. 2.注册完创建新的空间 3.这时候会自动分配给你一个域名,但是有效期是30天. 4.若要长久使用,最好用自己的域名 ...
前端上传图片到七牛云
前端如何上传图片到七牛云流程: 1.七牛云后台的对象存储功能 2.node.js后台生成七牛云的token 3.前端利用element UI/ice 的upload组件 4.文件名和token作为参 ...
uni-app 上传图片到七牛云
uni-app 上传图片到七牛云我的流程是:在上传图片到七牛之前,先调后端提供的接口获取token.key等,然后通过uni.uploadFile把token.key传给七牛: token:从后端获 ...
React中：富文本编辑器(react-quill),自定义上传图片到七牛云
1.组件封装 import React, { useState, useEffect, useRef } from 'react'; import ReactQuill from 'react-qui ...
七牛云上传图片到七牛云并返回图片URL
七牛云上传图片到七牛云并返回图片URL 鸣谢'追逐盛夏流年':https://blog.csdn.net/j1231230/article/details/80061834 在开发项目的时候,经常会 ...
实现Java+Vue上传图片到七牛云和从七牛云删除图片
环境准备开发环境后端: JDK1.8, SpringBoot2.2.2.RELEASE, Maven3.6.3 前端: vue-element-admin4.4.0 相关链接七牛云JavaSDK ...
小程序上传图片到七牛云
小程序上传图片到七牛云一.创建七牛云账号,获取ak.sk,创建对象存储空间名称二.服务端接口获取七牛token值,个人使用的php编写的 ...
前端如何上传图片到七牛云
From: https://www.jianshu.com/p/7520e0bee777 前端如何上传图片到七牛云流程: 生成token => token和图片作为new FromData() ...
html5七牛图片上传js,前端如何上传图片至七牛云
上传文件是我们在前端开发中经常遇到的一个问题.最近在做某项目管理后台的时候,需要将轮播图上传至七牛云.以前在Vue里面做过类似的功能,但是在Angular中使用同样的方法发现行不通. 此篇文章主要介绍 ...
koa2 + vue上传图片到七牛云
1.首先安装插件 koa-multer 用于上传图片和qiniu. npm install --save koa-multer npm install --save koa-qiniu 2.新建文件q ...

express实现上传图片到七牛云

第一种实现方式

express实现上传图片到七牛云相关推荐

最新文章

热门文章