把图片保存到数据库中

最新推荐文章于 2022-10-15 14:20:44 发布

我，休伯利安舰长

最新推荐文章于 2022-10-15 14:20:44 发布

阅读量303

点赞数

CC 4.0 BY-SA版权

文章标签：数据库 html css javascript

本文链接：https://blog.youkuaiyun.com/weixin_49757916/article/details/122184462

本文介绍如何将图片以二进制数据存储到数据库中。通过HTML、JavaScript（使用FileReader API）获取图片，转换为DataURL，再在控制器部分处理，最终将图片数据保存至数据库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

把图片保存到数据库中，这个是我最近遇到的问题，不过已经解决，我的原题是要求要以二进制的形式把图片保存到数据库。

二进制？？我有点懵，回来找了找以前的代码，我发现我写这种方式，只不过当时对这种方式没太注意然后就没记住，找了找，和在网上搜，然后发现我自己写过这种方式，然后我就把以前的代码翻了出来并写进去!

视图代码：

一、html部分

 <label class="col-2" for="cNoticeCarousel">图片：</label>
         <div class="col-sm-5 ">
              <img scr="" id="Picture" class="do-block" style="max-width: 274px; max-height: 153px;" ondblclick="showImageFile()">
               <input type="file" id="fileImage" name="imgFile" multiple="multiple" accept="image/jpeg,image/png,image/jpg,image/gif,image/bmp" onchange="loadImgToEimg()">
                                
          </div>

如上，便是我HTML的代码

二、js部分

var imgReader = new FileReader();
      
regexImageFilter = /^(?:image\/bmp|image\/gif|image\/jpg|image\/jpeg|image\/png)$/i;

function loadImgToEimg() {
            
     var file = $("#fileImage").get(0).files[0];
           
         if (regexImageFilter.test(file.type)) {
             imgReader.readAsDataURL(file);
          }
           else {
            layer.alert("请选择图片文件");
          }
      }
       
   imgReader.onload = function (evt) {
       $("#Picture").attr("src", evt.target.result);
   }

如上，js部分代码，
var imgReader = new FileReader(); 文件读取

regexImageFilter = /^(?:image\/bmp|image\/gif|image\/jpg|image\/jpeg|image\/png)$/i; 图片文件

/^(?:image\/bmp|image\/gif|image\/jpg|image\/jpeg|image\/png)$/i 正则表达式过滤

var file = $("#fileImage").get(0).files[0]; 选取选择图片

if (regexImageFilter.test(file.type)){}else{} 判断类型

imgReader.readAsDataURL(file); 读取文件转换成URL

文件读取 onload事件:

imgReader.onload = function (evt) {
$("#Picture").attr("src", evt.target.result);
}

这便是代码的意或者意义，

控制器部分：

if (imgFile != null)
{
     byte[] byteFile = new byte[imgFile.ContentLength];
     imgFile.InputStream.Read(byteFile, 0, imgFile.ContentLength);
     modPay.payPic = byteFile;
}

如上便是我的控制器代码