1.html方式上传
2.ajax方式上传
广告标题：
链接地址：
类型：
上传图片：
3.egg.js后端上传图片保存到本地
（1）安装依赖包
- 安装mz-modules包
cnpm install mz-modules --save - 安装时间格式化插件
cnpm i silly-datetime --save
（2）schema
module.exports = app => {
const mongoose = app.mongoose;
const Schema = mongoose.Schema;
const BannerSchema = new Schema({
title: { type: String },
type: {
type: Number,
default: 0 //0：PC；1：APP；2：H5
},
img_url: { type: String },
link: { type: String },
status: { type: Number, default: 1 },
create_time: { type: Date, default: Date.now },
update_time: { type: Date, default: null }
});
return mongoose.model('Banner', BannerSchema, 'banner');
};
（3）service\utils
const path = require("path");
const mkdirp = require('mz-modules/mkdirp');
const sd = require('silly-datetime');
const Service = require("egg").Service;
class UtilsService extends Service {
async getUploadFile(filename){
let date = sd.format(new Date(),'YYYYMMDD');
let dir = path.join('app/public/back/upload', date);
await mkdirp(dir); //创建以日期格式的文件夹
let timestamp = new Date().getTime();
let uploadDir = path.join(dir,timestamp + path.extname(filename));
return {
uploadDir: uploadDir,
saveDir: uploadDir.slice(3).replace(/\\/g,'/')
}
}
}
module.exports = UtilsService;
（4）Controller 控制层
'use strict';
const fs = require('fs');
const pump = require('mz-modules/pump');
const Controller = require('egg').Controller;
class BannerController extends Controller {
async upload() {
const { ctx } = this;
let files = {};
let stream;
let parts = ctx.multipart({ autoFields: true });
while((stream = await parts()) != null){
if (!stream.filename){ //图片名称 xxx.png
break;
}
let filedname = stream.fieldname; //字段名称 img_url
let dir = await ctx.service.tools.getUploadFile(stream.filename);
let target = dir.uploadDir;
let writeStream = fs.createWriteStream(target);
await pump(stream, writeStream);
files = Object.assign(files, {[filedname]: dir.saveDir});
}
var obj = Object.assign(files, parts.field);
//console.log(JSON.stringify(obj));
var result = await ctx.service.back.banner.upload(obj);
if(result){
ctx.helper.success({ctx, code:0});
}else{
ctx.helper.fail({ctx, code:1, res:result });
}
}
}
module.exports = BannerController;
（5）Service 服务层
const Service = require('egg').Service;
const mongoose = require('mongoose');
class BannerService extends Service {
async upload(obj) {
const {ctx} = this;
return await new ctx.model.Banner(obj).save();
}
}
module.exports = BannerService;
4.egg.js后端上传图片到七牛云对象存储
（1）安装依赖包
安装mz-modules包
cnpm install mz-modules --save安装时间格式化插件
cnpm i silly-datetime --save安装七牛云对象存储node.js包
cnpm install qiniu --save安装stream-wormhole包
cnpm install stream-wormhole --save
（2）配置config.default.js
config.qiniu = {
accessKey: ' ', //Access Key
secretKey: ' ', //Secret Key
bucket: ' ', //要上传的空间名
domainName: ' ' //空间绑定的域名
}
image.png
（3）schema
module.exports = app => {
const mongoose = app.mongoose;
const Schema = mongoose.Schema;
const BannerSchema = new Schema({
title: { type: String },
type: {
type: Number,
default: 0 //0：PC；1：APP；2：H5
},
img_url: { type: String },
link: { type: String },
status: { type: Number, default: 1 },
create_time: { type: Date, default: Date.now },
update_time: { type: Date, default: null }
});
return mongoose.model('Banner', BannerSchema, 'banner');
};
（4）service\utils
const path = require("path");
const mkdirp = require('mz-modules/mkdirp');
const sd = require('silly-datetime');
//qiniu
const fs = require("fs");
const qiniu = require("qiniu");
const sendToWormhole = require("stream-wormhole");
const Service = require("egg").Service;
class UtilsService extends Service {
async getUploadFile(filename){
let date = sd.format(new Date(),'YYYYMMDD');
let dir = path.join('app/public/back/upload', date);
await mkdirp(dir); //创建以日期格式的文件夹
let timestamp = new Date().getTime();
let uploadDir = path.join(dir,timestamp + path.extname(filename));
return {
uploadDir: uploadDir,
saveDir: uploadDir.slice(3).replace(/\\/g,'/')
}
}
async uploadQiNiu(stream, filename, localFilePath) {
const { ctx } = this;
const mac = new qiniu.auth.digest.Mac(this.config.qiniu.accessKey, this.config.qiniu.secretKey);
const options = { scope: this.config.qiniu.bucket };
const putPolicy = new qiniu.rs.PutPolicy(options);
const uploadToken = putPolicy.uploadToken(mac);
let config = new qiniu.conf.Config();
config.zone = qiniu.zone.Zone_z2;
try {
const formUploader = new qiniu.form_up.FormUploader(config);
const putExtra = new qiniu.form_up.PutExtra();
const imgUrl = await new Promise((resolve, reject) => {
formUploader.putFile(uploadToken, filename, localFilePath, putExtra, (respErr, respBody, respInfo) => {
if (respErr) {
reject("上传失败");
}
if (respInfo.statusCode == 200) {
resolve(this.config.qiniu.domainName + "/" + respBody.key);
} else {
reject("上传失败");
}
// 上传之后删除本地文件
fs.unlinkSync(localFilePath);
});
});
if (imgUrl !== "") {
return { url: imgUrl };
} else {
return false;
}
} catch (err) {
//如果出现错误，关闭管道
await sendToWormhole(stream);
return false;
}
}
}
module.exports = UtilsService;
（5）helper.js
module.exports = {
errorCode: {
0: '成功',
1: '失败',
},
success: ({ ctx, code=0, res = null }) => {
ctx.status = 200
ctx.body = {
code: code,
message: ctx.helper.errorCode[code],
data: res
}
},
fail: ({ ctx, code = 1, res=null }) => {
ctx.status = 200
ctx.body = {
code: code,
message: ctx.helper.errorCode[code],
data: res
}
}
}
（6）Controller 控制层
'use strict';
const fs = require('fs');
const pump = require('mz-modules/pump');
const path = require("path");
const Controller = require('egg').Controller;
class BannerController extends Controller {
async upload() {
const { ctx } = this;
let stream;
let files = {};
let parts = ctx.multipart({ autoFields: true });
while((stream = await parts()) != null) {
if (!stream.filename) { //图片名称 xxx.png
break;
}
let filedname = stream.fieldname; //字段名称 img_url
let dir = await ctx.service.tools.getUploadFile(stream.filename);
let filename = dir.filename;
let localFilePath = path.join(__dirname, "../../" + dir.saveDir);
//console.log("dirname:" + __dirname); //H:\vuejs\example\xiaomi\app\controller\back
let writeStream = fs.createWriteStream(localFilePath);
// 上传到本地
await pump(stream, writeStream);
// 上传七牛云对象存储
let qiniu = await ctx.service.utils.uploadQiNiu(stream, filename, localFilePath);
if(qiniu) {
files = Object.assign(files, {[filedname]: qiniu.url});
}else{
ctx.helper.fail({ctx, code:1});
}
}
var obj = Object.assign(files, parts.field);
var result = await ctx.service.back.banner.upload(obj);
if(result){
ctx.helper.success({ctx, code:0});
}else{
ctx.helper.fail({ctx, code:1, res:result });
}
}
}
module.exports = BannerController;
（7）Service 服务层
const Service = require('egg').Service;
const mongoose = require('mongoose');
class BannerService extends Service {
async upload(obj) {
const {ctx} = this;
return await new ctx.model.Banner(obj).save();
}
}
module.exports = BannerService;
5.七牛云对象存储 新建存储空间
空间管理/新建空间
image.png
6.七牛云对象存储创建域名和配置域名的 CNAME
（1）创建域名
域名管理/创建域名
image.png
（2）配置域名的 CNAME
-
复制CNAME
cdn-dengwq-com-idvc8ce.qiniudns.com到阿里云的云解析DNS
image.png 阿里云域名解析
云解析DNS/域名解析/解析设置
image.png
-
配置成功
image.png