js将图片上传服务器文件夹下,Egg.js 实现向服务器上传图片
1.安装时间处理 及 压缩 模块
yarn add silly-datetime pump
2.文件保存路径
config/config.default.js
config.uploadDir = 'app/public/avatar/upload';
3.创建tools service
app/service/tools.js
'use strict';
const Service = require('egg').Service;
const path = require("path");
const sd = require('silly-datetime');
const mkdirp = require('mkdirp');
class ToolsService extends Service {
/**
* 获取文件上传目录
* @param {*} filename
*/
async getUploadFile(filename) {
// 1.获取当前日期
let day = sd.format(new Date(), 'YYYYMMDD');
// 2.创建图片保存的路径
let dir = path.join(this.config.uploadDir, day);
await mkdirp(dir); // 不存在就创建目录
let date = Date.now(); // 毫秒数
// 返回图片保存的路径
let uploadDir = path.join(dir, date + path.extname(filename));
// app\public\avatar\upload\20200312\1536895331666.png
return {
uploadDir,
saveDir: this.ctx.origin + uploadDir.slice(3).replace(/\\/g, '/')
}
}
}
module.exports = ToolsService;
4.调用 controller
app/controller/article.js
// 保存头像/封面
async saveAvatar() {
const { ctx } = this;
const parts = ctx.multipart({ autoFields: true });
let files = {};
let stream;
while ((stream = await parts()) != null) {
if(!stream.filename){
break;
}
const fieldname = stream.fieldname; // file表单的名字
// 上传图片的目录
const dir = await this.service.tools.getUploadFile(stream.filename);
const target = dir.uploadDir;
const writeStream = fs.createWriteStream(target);
await pump(stream, writeStream);
files = Object.assign(files, {
[fieldname]: dir.saveDir
});
}
if(Object.keys(files).length > 0){
ctx.body = {
code: 200,
message: '图片上传成功',
data: files
}
}else{
ctx.body = {
code: 500,
message: '图片上传失败',
data: {}
}
}
}
5.配置路由
// 上传图片/头像/封面
router.post('/tools/saveavatar', controller.article.saveAvatar);
6.页面逻辑代码
封装组件
src/components/UploadAvatar.js
调用
js将图片上传服务器文件夹下,Egg.js 实现向服务器上传图片相关推荐
- 模拟QQ相册上传图片(上传指定文件夹下所有的图片) 多线程上传(每个图片开辟一个子线程)
上传图片 package com.hp.zuoye01;import java.io.File; import java.io.FileInputStream; import java.io.File ...
- 模拟QQ相册上传图片(上传指定文件夹下所有的图片)
package cnm.hp.zy;import java.io.*;public class Copy {public static void main(String[] args) throws ...
- Dropzone单文件上传、多文件上传、文件夹上传,springmvc接收,上传至Minio的一系列问题
0 前言 1.项目需要上传文件和大量的文件夹,页面只有一个input file标签会很丑,偶然间得知dropzone类库, 决定使用. 2. 项目后端采用springmvc接收,调用minio代码上传 ...
- 弹性服务器怎么上传文件,上传哪个文件夹弹性云服务器
上传哪个文件夹弹性云服务器 内容精选 换一换 华为云帮助中心,为用户提供产品简介.价格说明.购买指南.用户指南.API参考.最佳实践.常见问题.视频帮助等技术文档,帮助您快速上手使用华为云服务. 本节 ...
- node.js实现图片上传
两步走战略: 将图片上传到服务器 将图片的路径保存到数据库 图片上传到服务器 下载第三方插件multer npm install multer --save 先写一个上传图片的接口 在路由文件夹中创建 ...
- web上传整个文件夹
在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 先说下要求: PC端全平台支持,要求支持Windows,Mac,Linux 支持所 ...
- 如何上传图片到fileupload空间_如何用原生js写图片上传组件v2.0(还有新版本)?...
js图片上传组件: 基本要求: 1.上传的图片可预览,可删除,可被覆盖更新 2.要求图片格式为jpg和png,大小不能超过2M 新加需求: 1.模拟回显,可用本地存储(实际上的回显是通过后台传过来的u ...
- js实现图片上传预览及进度条
js实现图片上传预览及进度条 原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...
- java 图片上传_java web图片上传和文件上传实例
本篇文章主要介绍了java web图片上传和文件上传实例,具有一定的参考价值,有需要的可以了解一下. 图片上传和文件上传本质上是一样的,图片本身也是文件.文件上传就是将图片上传到服务器,方式虽然有很多 ...
最新文章
- 温度单闭环实验计算机控制,过程控制系统实践指导简介,目录书摘
- 换硬币c语言编程_如何才能成为编程高手?别人都不告诉你的东西,我来说给你听...
- Apache与nginx的优缺点对比
- GBDT!深入浅出详解梯度提升决策树
- ios加速计(可以用来检测摇动,自定义反应灵敏度)
- bt5重启网卡命令_BackTrack 5 简单网络配置命令
- 第二届高校大数据比赛之鼠标轨迹识别
- vue2.0 如何自定义组件(vue组件的封装)
- [转]暴牛!全国女生录用老公统一考试试卷
- QT学习笔记(四):Qt5+MSVC编译 中文字符显示乱码问题解决
- OpenCV-Python实战(番外篇)——利用 KNN 算法识别手写数字
- MATLAB2021下载安装图文教程
- 期权与期货有哪些不同?
- Win10家庭中文版如何添加本地用户
- Ken Thompson的话
- 【特征提取】|TSE
- 《新撰组异闻录——铁》启示录
- Quantopian 做多大市值科技和消费周期股,做空小市值和消费周期股回测
- RHCSA 2022/10/14
- 【KMP】ZOJ-3587-Marlon's String