开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js图片上传顺带存进数据库

基础概念

JavaScript 图片上传并存储到数据库的过程通常涉及以下几个步骤：

客户端选择图片：用户通过 <input type="file"> 选择图片文件。
读取图片数据：使用 JavaScript 的 FileReader API 读取图片文件内容。
发送图片数据到服务器：通过 AJAX 请求将图片数据发送到后端服务器。
服务器处理图片：后端服务器接收图片数据，可能进行一些处理（如压缩、格式转换等），然后将图片数据存储到数据库中。

相关优势

用户体验：用户可以直接在浏览器中上传图片，无需跳转到其他页面或刷新当前页面。
实时反馈：可以在上传过程中提供实时进度反馈，增强用户体验。
灵活性：可以灵活处理图片数据，如进行压缩、裁剪等操作。
安全性：可以在服务器端进行额外的安全检查，如防止恶意文件上传。

类型

前端上传：直接在浏览器中完成图片选择和上传。
后端上传：通过表单提交或 AJAX 请求将图片发送到服务器进行处理和存储。

应用场景

社交媒体平台：用户上传头像或发布带图片的帖子。
电子商务网站：用户上传商品图片。
博客平台：用户上传文章配图。

示例代码

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Upload</title>
</head>
<body>
    <input type="file" id="fileInput">
    <button onclick="uploadImage()">Upload</button>

    <script>
        function uploadImage() {
            const fileInput = document.getElementById('fileInput');
            const file = fileInput.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const imageData = e.target.result;
                    const xhr = new XMLHttpRequest();
                    xhr.open('POST', '/upload', true);
                    xhr.setRequestHeader('Content-Type', 'application/json');
                    xhr.send(JSON.stringify({ image: imageData }));
                };
                reader.readAsDataURL(file);
            }
        }
    </script>
</body>
</html>

后端代码（Node.js + Express）

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const mongoose = require('mongoose');

app.use(bodyParser.json({ limit: '50mb' }));
app.use(bodyParser.urlencoded({ limit: '50mb', extended: true }));

mongoose.connect('mongodb://localhost:27017/imageDB', { useNewUrlParser: true, useUnifiedTopology: true });

const imageSchema = new mongoose.Schema({
    data: String
});

const Image = mongoose.model('Image', imageSchema);

app.post('/upload', async (req, res) => {
    const imageData = req.body.image;
    const image = new Image({ data: imageData });
    await image.save();
    res.send('Image uploaded successfully');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

遇到的问题及解决方法

问题1：图片上传速度慢

原因：图片文件过大或网络状况不佳。

解决方法：

在前端使用 FileReader API 进行图片压缩。
使用分片上传技术，将大文件分成多个小片段上传。

问题2：图片存储到数据库后无法显示

原因：图片数据格式不正确或数据库字段类型不匹配。

解决方法：

确保图片数据以正确的格式（如 Base64）存储。
检查数据库字段类型，确保能够存储大字符串数据。

问题3：安全性问题

原因：恶意文件上传可能导致服务器被攻击。

解决方法：

在服务器端进行文件类型检查，只允许上传特定类型的图片文件。
使用安全的文件名存储图片，避免文件名冲突和路径遍历攻击。

通过以上步骤和代码示例，可以实现一个基本的图片上传并存储到数据库的功能。根据具体需求，可以进一步优化和扩展功能。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

图片上传预览js

DOCTYPE html> js.../jquery.js" type="text/javascript" charset="utf-8"> ... 图片

49K9 0

js --- 上传图片预览

DOCTYPE html> 图片上传预览功能 <input id='inp' type="file" name...= -1){ imgs.src= imgSrc; }else{ alert('错误的图片格式'); } // 正确显示 function geturl(file){

34.8K1 0

js上传图片预览

28.2K0 0

js拖拽上传图片

有时候，在开发中，需要遇到拖拽上传图片的需求，即从磁盘选中一张或多张图片，然后按着鼠标把图片拖动到页面上指定的区域，实现图片的上传。...1、后端上传图片的接口我是之前用vue写一个简单的后台系统的时候，用Java的SpringMVC+MyBatis的框架写了一个简单的后台管理的一些接口，刚好有一个上传用户头像的接口，该接口是把上传后的图片存储在另外一台...Tomcat下，这里就直接使用这个接口来上传图片。...ie=edge"> Document js...里面用的formData对象来上传图片的，该对象的作用是：　　1、用一些键值对来模拟一系列表单控件，即把form中所有表单元素的name与value组装成一个queryString；　　2、异步上传二进制文件

18.2K3 0

js批量上传文件_批量上传图片java

今天说一说js批量上传文件_批量上传图片java,希望能够帮助大家进步!!!...文件上传无疑是web应用中一个非常常用的功能，下面小编给大家分享一下diyUpload.js+ThinkPHP中的UploadFile类实现图片的批量上传。...，可以点击图片上的“X”按钮删除，如下：页面上js代码如下：此代码由Java架构师必看网-架构君整理 /* * 服务器地址,成功返回,失败返回参数格式依照jquery.ajax习惯...‘开始上传’按钮上传图片，上传完成后页面展示如下图：可以修改或者删除图片，也可以点击‘全选图片’按钮，批量删除图片，或者选择多张图片删除： PHP上传图片代码：此代码由Java..."))); } } } 到此，批量上传图片就全部实现了，但是有一个bug一直困扰了小编很久，就是有些图片原图会成功上传，但缩略图会上传成黑色的图片，如图：

27.4K4 0

用JS压缩上传的图片

现在网上的高清原图尺寸也有好几M甚至更大，而且现在手机像素高了拍出来的照片也特别大，所以有时候需要对用户上传图片时进行压缩处理。...图片压缩js代码： function compressedImg(path, callback) { var img = new Image(); img.src = path;...DOCTYPE html> JS图片压缩上传我们需要转成Blob对象的形式，再上传。...上传压缩图片ajax部分代码: //dataURL转成Blob对象 function dataURLtoBlob(dataURI) { var byteString = atob(dataURI.split

37.2K2 0

JS 实现远程上传图片功能

场景：上传图片到远程服务器时,本地无法拿到服务器图片临时路径。上传文件到远程服务器... js/jquery.1.9.1.js" type="text/javascript" charset="utf-8"> 上传...--把图片的类型添加进去--> formData.append('type', 'up'); /** * 通过formData.set(key, val

7.9K2 0

原生js实现图片单张上传及批量上传

效果图：图片 pc图片上传...position: relative; width: 240px; height: 240px; background: url(add.png)no-repeat center center; }//这里的图片背景源文件在下面....up input{ width: 240px; height: 240px; opacity: 0; } .button{ margin-top: 30px; } /*批量上传... 添加图片

7.2K1 0

玩转图片上传————原生js XMLHttpRequest 结合FormData对象实现的图片上传

服务端如何处理的解决方案看我的这篇文章http://www.cnblogs.com/theone67/p/6698762.html

8.3K1 0

js实现本地上传图片预览

在做网站系统时经常会用到图片上传功能，用户往往希望能看到自己上传的图片的样子，有的人是采用将图片上传到服务器之后再回显到页面，这种方式在无形之中增加了服务器的运行压力，因为如果用户感觉不满意还会再次上传图片...为了减轻服务器压力，我们通过js来实现本地图片上传预览功能，不经过服务器就实现预览效果。...file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();"> 上面这部分代码是页面上传按钮和显示图片的区域...接下来请看js控制代码 function setImagePreview(avalue) { var docObj=document.getElementById("doc"); var imgObjPreview...imgObjPreview.style.display = 'none'; document.selection.empty(); } return true; } 这样我们就实现了本地图片上传预览功能

8.1K4 0

JAVA图片批量上传JS-带预览功能

css/upload/zyupload-1.0.0.min.css " type="text/css"> js.../jquery-1.8.3.min.js"> js/upload/zyupload-1.0.0....min.js"> js","exe","gif"],// 上传文件的类型 fileSize :...// 是否可以裁剪图片 del : true, // 是否可以删除文件 finishDel :

7.2K5 0

基于cropper.js的图片上传和裁剪

项目中要求图片上传并裁剪的功能，之前也有接触过很多图片裁剪插件，效果体验不是很好，今天推荐一款好用的插件-cropper，超级好用，裁剪功能丰富，满足了各种需求。...图片.png 代码： 1：引入相关的css和js文件,cropper.min.css，ImgCropping.css，cropper.min.js等，文件下载地址：http://www.jq22.com...margin-top: 10px } 上传图片...--图片裁剪框 end--> js"> 图片上传至后台。

6.7K4 0

JS实现本地预览上传图片并获取宽高

我们在本地上传文件、图片是用file类型的表单，大多时候我们想让上传的图片先预览在我们本地，下面来看看代码吧。...image/png" name="file" onchange="selectImg(this)"> 我们给上传表单的标签加一个...JS部分： function selectImg(file) { if (!file.files || !...$('#showImg').attr("src", replaceSrc); }; reader.readAsDataURL(file.files[0]); } 上面就实现了上传图片是本地预览图片了...我们可以通过下面这句代码获得图片的其他信息↓ console.log(file.files); 可以从上面的截图看到，有图片的名字、大小、格式等。

8K2 0

原生JS获取input上传的图片返回的地址

HTML文件点击上传上传的时候不显示 ,上传以后添加src--> 上传后，读取上传的文件 // 点击上传图片 function uploadImg(){ let file = document.getElementById('uploadFile').files

22.3K1 0

JS实现复制截图，自动显示图片，并上传图片到后端，源码自取

写博客的时候，很多作者会用到截图上传的功能，通过微信截图，QQ截图，直接将截取的图片通过Ctrl+v 复制到编辑器里。编辑器自动将图片上传，并返回图片地址，将图片渲染到页面上。..."#mytextarea").addEventListener('paste', function (event) { console.log(event) }) 页面图片如下...1971621943,955938305&fm=26&gp=0.jpg" /> js...= new FormData() sendData.append('editormd-image-file', file) 生成一个FormData对象，并将图片文件追加进去。...因为上传图片必须要用FormData来传数据。介绍的这种方法已在最新版谷歌，火狐，360，Edge 测试通过。请尽情使用

6.6K1 0

emlog获取文章外链图片数量与数据库上传图片数量

在制作emlog模版列表时，为了排版有时会需要判断文章内的外链图片与数据库上传的图片数量，通过判断图片数量就可以很好的美化列表模版了，蓝叶就学习着写了这两种统计文章图片数量的函数，有需要的把函数代码复制到...f162_imgcount函数是正则获取文章内的外链图片数量，调用代码<?php echo f162_imgcount( <?...php function f162_imgcount($content){ //正则获取文章内的外链图片数量 preg_match_all("|]+src=\"([^>\"]+)\"?...content, $imgarr); $result = $imgarr[1]; return count($result); } function f162_filecount($logid){ //查询数据库统计文章内上传的图片数量

6544 0

cropper.js 实现HTML5 裁剪图片并上传(裁剪上传头像。)「建议收藏」

************* 注： cropper.js 版本更新至1.5.11 。...**** 我的需求功能：在手机端实现上传头像，带裁剪框。 cropper.js 通过canvas实现图片裁剪，最后在通过canvas获取裁剪区域的图片base64串。...然后又把图片上传到七牛上面，发现可以使用二进制流上传，就不用jpg了后台处理base64 java代码片段 /** * 上传base64 * @param imgBase64...中没有提供圆形的方法，如果想要圆形的你要修改 1. cropper.js的。...3.HTML5 本地裁剪图片并上传至服务器（老梗）发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/140638.html原文链接：https://javaforall.cn

7.8K6 0

Nodejs实现图片上传,链接保存到Mongodb数据库

需求: 客户端批量上传图片到服务器,服务器返回图片链接用到的主要工具及node库有 multer mongoose 代码如下 var router = require('express').Router...cb(null, Date.now() + '.' + str[1]) } }) var upload = multer({storage: storage}) // 上传图片到图片仓库并返回上传的图片路径...arr}}}, (err, data) => { res.json({ code: 200, data: arr }) }) } }) 上传图片到服务器的...public/upload文件夹下更新图片链接到图片库, 主要是用了 {$addToSet: {pictureUrlArr: {$each: arr}}} 批量插入一个数组

2.4K1 0

基于asp.net+ easyui框架，js提交图片，实现先上传图片再提交表单

上篇博客，我们简单的介绍了js实现上传图片之前判断图片格式，同时实现预览。这篇博客，给大家介绍如何上传图片，上传成功之后，再提交表单。.../locale/easyui-lang-zh_CN.js"> 上传图片时js--%> js/jquery.form.js">... 上传图片时，需要jquery.form.js的js文件，下载地址：http://download.csdn.net/detail/jiuqiyuliang/6919517...上传图片，并提交表单就是这么简单，一些js代码+一般处理程序，相信你一看就会。...实现上传图片之前判断图片格式，同时实现预览，兼容各种浏览器+下载基于asp.net+ easyui框架，js提交图片，实现先上传图片再提交表单基于asp.net + easyui框架，一步步学习

7.6K1 0

js实现图片粘贴上传到服务器并展示

最近看了一些有关于js实现图片粘贴上传的demo,实现如下: (这里只能检测到截图粘贴和图片右键复制之后粘贴) demo1: document.addEventListener('paste', function...uploadImgFromPaste(src_str, 'paste', isChrome); }, 1); } }) //调用图片上传接口...img.className = 'my_img'; img.src = data.data[i]; //设置上传完图片之后展示的图片...var img = document.createElement('img'); img.src = res.data[i]; //设置上传完图片之后展示的图片..."); } }); } } 注意:因为只支持右键复制图片,所以并不能一下复制两张图片,所有图片复制并粘贴上传待研究

3.6K6 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭