layui图片上传之后后台如何修改图片的后缀名以及返回数据给前台

const pathLib = require(‘path‘);//引入node.js下的一个path模块的方法,主要处理文件的名字等工作,具体可看文档
const fs = require(‘‘fs);
var app = new express();
//前台图片上传访问路径
 app.post(‘/upload‘,(req,res)=>{
        if(Boolean(typeof req.files[0])){//判断访问该后台时是否有图片上传
            var ext = pathLib.parse(req.files[0].originalname).ext;//获取文件的后缀名,req.files[0].originalname为文件名,pathLib.parse(文件名).ext方法获取文件名的后缀名;
            var newPath = (req.files[0].path +ext).replace(/\\/gi,‘\\\\‘);//将文件保存的路径名并加上后缀,然后替换文件名中的 ‘\’ 换成 ‘\\‘,以此保存到数据库中
            var newFilename = req.body.id+‘_‘+req.files[0].filename;//保存图片的新名字
            if(newFilename){
                fs.rename(req.files[0].path,newPath,(err)=>{//重命名,参数一:原始路径,参数二:新路径,参数三:回调函数
                    if(err){
                        res.status(500).send(‘file opration error‘).end();
                    }else{
                          //将保存的路径插入到数据库中
                        db.query(`INSERT INTO img_table (phone,src,date) VALUES(‘${req.body.id}‘,‘${newPath}‘,‘${req.body.time}‘)`,(err)=>{
                            if(err){
                                res.json({"code":"0","msg":"error"}).end();
                            }else{
                                //返回JSON数据,并指定图片的样式大小
                                res.json({"code":"200","msg":"success","style":‘display: inline-block; height: auto; max-width:100%;‘}).end();
                            }
                        });
                    }
                });
            }

        }
    });
return app;

我这里后台用的是node.js,框架使用的是express,一个挺老的框架,关键是如何处理上传后的图片操作。

原文地址:https://www.cnblogs.com/Liqian-Front-End-Engineer/p/11965326.html

时间: 2024-10-28 17:05:53

layui图片上传之后后台如何修改图片的后缀名以及返回数据给前台的相关文章

asp.net多图片上传同时保存对每张图片的描述

前台aspx //图片预览和描述 function previewImage(file) { var div = document.getElementById('preview'); div.innerHTML = ""; for (var i = 0; i < file.files.length; i++) { //alert(file.files[i]); var ndiv = document.createElement("div"); ndiv.st

php图片上传检测是否为真实图片格式

PHP 图片上传,如果不做任何判断的话,随便一个文件如 rar,zip,php,java等文件改个文件名,改个后缀就能以图片形式上传的服务器,往往会造成极大的危害! 工具/原料 PHP apache / nginx / iis phpstorm / netbeans / notepad++ / editplus 方法/步骤 1 第一种方法:如果是只是单纯判断是否是图片格式的话,我使用  getimagesize 方法function checkIsImage($filename){    $al

在ASP.NET MVC下实现单个图片上传, 客户端服务端双重限制图片大小和格式, 服务端裁剪图片

在"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传"一文中,使用JSAjaxFileUploader这款插件实现了单文件上传,在chrome, firefox下运行良好,但在某些版本的IE浏览器(比如IE8,IE9)下却无法正常运行,这可能是因为JSAjaxFileUploader插件在编写时没有考虑到某些低版本IE浏览器导致的.本篇,就在ASP.NET MVC4下实现单个图片上传,具体功能包括: 1.在客户端选择图片,并限

JS 图片上传兼容性问题(获取图片宽高兼容)

原代码(360安全浏览器的极速模式不兼容) function ImgAuto(i, MaxW, MaxH) {     var o = new Image();     o.src = i.src;     var w = o.width;//w等于null,别的浏览器未出现该问题 } 图片需要重新再加载一遍 function ImgAuto(i, MaxW, MaxH) {     var o = new Image();     o.onload = function(){        

springBoot 连接打包成jar包运行时,获取图片上传文件、前端调用图片显示

配置文件在application.properties中进行配置 web.upload-path=d:/myfile/uploadweb.front-path=d:/myfile/frontspring.resources.static-locations=file:${web.upload-path},file:${web.front-path} application.yml配置方式 web:  upload-path: d:/myfile/upload  front-path: d:/my

使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码

富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种 CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用 UEDITOR:百度开发的插件,lite版是UM EasyUI编辑器:用easyUI的都懂,基本上肯定用到 其他的富文本编辑器就不说了,前两个小编我用的比较多 本来我是比较倾向于CKEditor,但是这个插件不支持图片上传,图片功能只能链接过去,而不能在控件本身中上传,所以就选择了UMeditor 为啥选择UM,不选

前端获取图片压缩后上传给后台

 此前有同事跟我聊过关于移动端用canvas压缩图片后再上传的功能,最近有了点空闲时间,所以就实践了一下.demo效果链接在文章底部贴出. 在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上传显然不是一个好办法. 目前来说,HTML5的各种新API都在移动端的webkit上得到了较好的 实现.根据查看caniuse,本demo里使用到的FileRe

用Ajax图片上传、预览、修改图片

首选图片的上传和下载并不是很难,但要注意细节. 一,给出前端图片上传的html代码 1.图片上传的控件 <img src="/${res}/images/default.png" alt="" class="backimg"> <form method="post" id="imgform" enctype="multipart/form-data" action=&q

layui加tp5图片上传实例

<div class="layui-fluid"> <div class="layui-row"> <form class="layui-form"> <div class="layui-form-item"> <label for="username" class="layui-form-label"> <span cl