koa2 + vue上传图片到七牛云

1.首先安装插件 koa-multer 用于上传图片和qiniu。

npm install --save koa-multer
npm install --save koa-qiniu

2.新建文件qiniu.js

const multer = require("@koa/multer");
const Router = require("@koa/router");
const router = new Router();
var uuid = require('uuid');
const  func  = require("../untils/upload");const storage = multer.diskStorage({// destination: function (req, file, cb) {//   cb(null, path.join(__dirname, "../../public"));// },// filename: function (req, file, cb) {//   let type = file.originalname.split(".")[1];//   cb(null, `${file.fieldname}-${Date.now().toString(16)}.${type}`);// },
});const limits = {fields: 10, //非文件字段的数量fileSize: 500 * 1024, //文件大小 单位 bfiles: 1, //文件数量
};const upload = multer({ storage, limits });
var fs = require('fs');
const {formatResponse} = require("../untils/common");
router.post('/upload',upload.single("file"), async (ctx, next) => {try {const file = ctx.file; // 获取上传文件// console.log(ctx.file)if (file) {const fileName = uuid.v1();// 创建文件可读流const reader = fs.createReadStream(file.path);// 获取上传文件扩展名const ext = file.originalname.split(".").pop();// 命名文件以及拓展名const fileUrl = `public/${fileName}.${ext}`;const result = await func.upToQiniu(reader, fileUrl);console.log(result)if (result) {ctx.body = formatResponse("200", result, "success");} else {ctx.body = formatResponse("500", '上传失败', "success");}} else {ctx.body = formatResponse("500", '没有选择图片', "success");}} catch (err) {ctx.body = formatResponse("500", 'err', "success");}
})
module.exports = router

3.在util文件夹中新建upload.js

var uuid = require('uuid');
var fs = require('fs');
// 上传到七牛
let qiniu = require('qiniu'); // 需要加载qiniu模块的
// 引入key文件
const QINIU = {accessKey: '输入Accesskey',  // 在七牛云官网申请secretKey: '输入secretKey',bucket: 'my-workspace-image'  // bucket是存储空间名称
}
const upToQiniu = (filePath, key) => {const accessKey = QINIU.accessKeyconst secretKey = QINIU.secretKeyconst mac = new qiniu.auth.digest.Mac(accessKey, secretKey)const options = {scope: QINIU.bucket}const putPolicy = new qiniu.rs.PutPolicy(options);const uploadToken = putPolicy.uploadToken(mac);// zone 华东机房  zone1 华北机房  zone2 华南机房   zoneNa0 北美const config = new qiniu.conf.Config()config.zone = qiniu.zone.zone2const localFile = filePathconst formUploader = new qiniu.form_up.FormUploader(config)const putExtra = new qiniu.form_up.PutExtra()// 文件上传return new Promise((resolved, reject) => {formUploader.putStream(uploadToken, key, localFile, putExtra, function (respErr, respBody, respInfo) {if (respErr) {reject(respErr)} else {resolved(respBody)}})})
}
module.exports = {upToQiniu,
}

在上传图片到七牛云时，想到不能直接放在自己的存储空间下面，所以可以在每张上传的图片路径上加上 /public

   const fileUrl = `public/${fileName}.${ext}`;

这样上传的图片会是 my-workspace-image/public 里面。

4.然后再vue中，直接用element ui 控件

       <el-uploadclass="avatar-uploader"name="file":action="'localhost:8081/qiniu/upload'":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload":on-error="uploadFiled"><img v-if="imageUrl" :src="data:imageUrl | img" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload>

       handleAvatarSuccess(res, file) {// debuggerif(res.code==='200'){this.ruleForm.courseTypeLogo = res.data.key;this.imageUrl = res.data.key;this.$message({message: '上传成功',type: 'success'});}else {// this.$message.error('上传失败');}},uploadFiled(err){this.$message.error('上传失败');console.log(err)},beforeAvatarUpload(file) {const isJPG = file.type === 'jpg' || 'png';const isLt2M = file.size / 1024 / 1024 < 2;if (!isJPG) {this.$message.error('上传头像图片只能是 JPG和png 格式!');}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 2MB!');}return isJPG && isLt2M;},

koa2 + vue上传图片到七牛云相关推荐

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

koa2 + vue上传图片到七牛云

koa2 + vue上传图片到七牛云相关推荐

最新文章

热门文章