nodejs关于前后端图片上传的思路及实现代码

### 图片上传

1.前端角度

a.将图片发给后端 ajax

1.前端获取图片信息 文件域

2.将文件信息 存到formdata

3.调用后端写的api接口发送数据

b.接受返回的数据

前端页面显示图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <title>Document</title>
</head>

<body>
        <input type="file" id=‘put‘>
        <img src=""  width="500" >
        <button id="btn">上传图片</button>
</body>
<script>
    var btn = document.getElementById("btn");
    let npath=‘http://10.9.22.225:5500‘;
    btn.onclick = function(){
      //通过文件域获取上传的图片信息
        var a = document.getElementById("put").files[0];
        console.log(a);
        var formdata = new FormData();
        console.log(formdata);
        formdata.append(‘img‘,a);
        console.log(formdata.get(‘img‘))

        $.ajax({
            url:npath+‘/aa‘,
            data:formdata,
            type:‘POST‘,
            processData: false,//必须
            contentType: false,//必须
            success:function(data){
                //console.log(data)
                console.log(data)
                var imgpath=   data.imgPath
                $(‘img‘).attr(‘src‘,imgpath)
            }
      })
    }

</script>
</html>

2.后端角度

目的:将前端上传的图片

1.图片本身应该能被访问(静态资源目录)

a.获取图片上传的数据 (multer().singer(‘hehe‘) req.file)

b.将数据存到文件里面去 fs.writeFile(‘路径‘,req.file.buffer)

文件名不重复(时间戳+随机水)

后缀名和源文件保持一致(minitype)

上传的文件大小不能超过一定尺寸(size)

写入路径用绝对路径 path.join(__dirname,‘./www‘)

2.路径信息存到数据里去

const express = require(‘express‘)
let app = express()
const multer = require(‘multer‘)
const fs = require(‘fs‘)
const path = require(‘path‘)
//single是单图片上传,多图片上传 array ,single里面就是上传图片的key值
//和图片相关的是req.file
app.use(‘/public‘,express.static(path.join(__dirname,‘./www‘)))

app.post(‘/aa‘,multer().single(‘img‘),(req,res)=>{
    let {buffer,mimetype} = req.file;
    let fileName = (new Date()).getTime() + parseInt(Math.random()*3435) + parseInt(Math.random()*6575);
    let fileType = mimetype.split(‘/‘)[1];
    let filePath =  path.join(__dirname,‘/www/images‘)
    let apath = `http://localhost:5500/public/images/${fileName}.${fileType}`

    fs.writeFile(`./www/images/${fileName}.${fileType}`,buffer,(data)=>{
        if(data){
            res.send({err:0,msg:"上传失败"})
        }else{
            res.send({err:1,msg:"上传成功",imgPath:apath})
        }
    })
})

app.listen(‘5500‘,()=>{
    console.log(‘start‘)
})

3.注意事项

1.数据类型 formdata

2.方法 post

3.正常ajaxpost的数据格式 表单 json

原文地址:https://www.cnblogs.com/zhouyingying/p/11330484.html

时间: 2024-10-29 04:50:04

nodejs关于前后端图片上传的思路及实现代码的相关文章

nodejs关于前后端图片上传的思路

### 图片上传 1.前端角度 a.将图片发给后端 ajax 1.前端获取图片信息 文件域 2.将文件信息 存到formdata 3.调用后端写的api接口发送数据 b.接受返回的数据 前端页面显示图片 2.后端角度 目的:将前端上传的图片 1.图片本身应该能被访问(静态资源目录) a.获取图片上传的数据 (multer().singer('hehe') req.file) b.将数据存到文件里面去 fs.writeFile('路径',req.file.buffer) 文件名不重复(时间戳+随机

基于nodeJs express 框架的图片上传和编辑(引用美图编辑工具)上传小示例

唉,由于近期工作中对于新知识的运用相对较少,也导致小码哥少有更新鄙人心得的机会.还望路过的基友们不要抱怨,勿喷,,,,, 本篇文章,是基于NodeJs Express框架完成的一个用于项目中图片上传和编辑上传的小示例,当然,由于项目工期不禁,都是在非工作时间慢慢完成的,导致至今该图片上传功能也未能插入项目中真正的验证最终效果.不过就小码哥感觉,基本思路及基本功能算是完成了. 下面便由小码哥来给基友们稍微讲解改功能的实现过程及其中用到的一些技术等等. 首先,说说NodeJs Express框架的搭

后端图片上传

用到的是simpleUpload.js需要依赖jquery.js.layer.js <div> <div class="input-inline"> <input type="text" value="" class="input input-auto" id="pic" name="pic" size="25"> <inpu

Simditor 富文本编辑器多选图片上传、视频连接插入

simditor 是一个基于浏览器的所见即所得的文本编辑器.Simditor 富文本编辑器, 支持多选图片上传, 视频连接插入, HTML代码编辑以及常用富文本按钮,支持的浏览器:IE10.Firefox.Safari. 点击这里下载zip文件.你也可以安装 Simditor bower 和 npm: $ npm install simditor $ bower install simditor 在 项目中使用 simditor 导入 simditor 样式文件和 js 文件 <link rel

UEditor之基于Java图片上传前后端源码研究

开心一笑 一定要快乐学习,所以学习之前先看个笑话: 刚来北京,租了一个小房,一楼,上淘宝买衣服,选了付钱了联系卖家:"我已付款,请发货."谁知那货直接说:"我看到你地址了,自己上楼来拿吧!我就在你楼上." 拿你妹,老子付了邮费的...送下来. 提出问题 Ueditor前后端源码的学习和简单的研究??? 解决问题 前提: 假如你已经看了我的前一篇文章,这一点很重要的啊,当然不看也可以,因为你已经是一个高手,就像我一样,哈哈: 假如你已经安装tomcat服务器: 假如你

百度ueditor的图片上传,前后端交互使用

百度ueditor的使用 一个文本编辑器,看了网上很多文档写的很乱,这里拾人牙慧,整理下怎么使用. 这个东西如果不涉及到图片附件上传,其实很简单,就是几个前端文件,直接引用,然后配置下ueditor.config.js即可.这里就不多说. 至于图片上传,ueditor 设计的时候是考虑和后端交互的,所以会看到可以下载什么php,java版本,还有很多网上会说道有什么后端配置文件,改那改这的,但是实际上后端存储业务是按照公司实际来的,实践起来并不顺利. 本文重点讲述的只用前端文件和ueditor.

UEditor之基于Java图片上传前后端源码研究 (转)

http://blog.csdn.net/huangwenyi1010/article/details/51637439 这是我的项目目录 1.从访问路径http://localhost:8081/Test/_examples/simpleDemo.html,我们主要是要看看,富文本框被加载出来之前,会调用哪些代码, 不卖关子,很明显,会调用后端的controller.jsp代码,因为我们已经在ueditor.config配置了: // 服务器统一请求接口路径 , serverUrl: URL

jQuery图片上传前先在本地预览(不经过后端处理)

前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得到的反而是C:\fakepath\a.jpg,这个路径是错误的.百度之后得到说浏览器基于保护用户的相关安全措施,隐藏了上传的真实路径,用fakepath代替,当然,调整浏览器的相关安全设置可以解决这个问题.但我们不可能让所有用户都通过设置浏览器的安全设置来进行图片上传,这种方法在网络交互上显然不现实

图片上传并回显后端篇

图片上传并回显后端篇 我们先看一下效果 继上一篇的图片上传和回显,我们来实战一下图片上传的整个过程,今天我们将打通前后端,我们来真实的了解一下,我们上传的文件,是以什么样的形式上传到服务器,难道也是一张图片?等下我们来揭晓 我们在实战开始前呢,我们先做一下准备工作,比如新建一个java web工程,如果你不懂这个的话,那我建议你先学一下Javaweb,可以去我的公众号找一下这方面的教程.我们就给我们的工程起名为UpImg,我们再给他建一个web包和util包,再把我们以前前端做的图片回显的代码拷