其他分享
首页 > 其他分享> > layui上传图片以二进制流保存

layui上传图片以二进制流保存

作者:互联网

前端:

            <div class="layui-form-item">
            <label class="layui-form-label" style="width:100px">图形名称</label>
            <div class="layui-input-inline">
                <input type="text" name="PicName" id="PicName"  lay-verify="title" placeholder="请输入" autocomplete="off" class="layui-input" style="width:220px">
                <input type="text" name="PicChoose" id="PicChoose"  style="display: none">
            </div>
            <div class="layui-upload" style="margin-left: 380px;">
                <button type="button" class="layui-btn" id="uploadImg" style="margin-left: 20px">选择图片</button>
                <button id="hideUpload" type="button" style="display: none"></button>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="text-align:center">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
            <div class="layui-upload-list" style="margin-left:300px">
                <p id="demoText"></p>
                <div style="width:220px;height:300px;background: white;margin-top: 20px"><img class="layui-upload-img" id="demo1"></div>
            </div>
        </div>
            
            <script>
            //图片上传
            var uploadInst = upload.render({
                elem: '#uploadImg'         //绑定点击按钮
                , url: '/EXFactoryBaseData/uploadPicFile'     //访问后台路径
                , accept: 'images'               //图片格式
                , auto: false                     //取消自动上传
                , method: 'post'                 //请求上传的 http 类型
                , bindAction: '#hideUpload'       //绑定真正的上传按钮
                , data: {                         //访问后台提交的数据
                    // name: $('#a').val()
                    baseId: function(){return baseId},
                    fileName: () => {
                        return $('#demo1').val();//官方文档说明:实现动态传值
                    }
                }
                , choose: function (obj) {
                    //预读本地文件示例,不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#demo1').attr({ src: result, width: "220", height: "300" });//图片链接(base64)
                    });
                    var PicChoose = "1";
                    $('#PicChoose').val(PicChoose);
                }
                , done: function (res) {
                    var result = JSON.parse(res)
                    //如果上传失败
                    if (result.code > 0) {
                        return layer.msg('图片上传失败!');
                    }
                    //上传成功
                    layer.msg("图片上传成功!", {
                        time: 1000
                    }, function () {
                        //重新加载页面
                        location.reload();
                    });
                }
                , error: function () {
                    //演示失败状态,并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
        });
    </script>

后端:

        /// <summary>
        /// 上传图片信息
        /// </summary>
        /// <returns></returns>
        [HttpPost]
        public string uploadPicFile()
        {
            string baseId = Request["baseId"].ToString();
            string PicName = Request["PicName"].ToString();
            string code = "0", msg = "";
            string[] imgInfo = Request.Files[0].FileName.Split('.');
            if (!(imgInfo[1] == "bmp" || imgInfo[1] == "jpg" || imgInfo[1] == "jpeg" || imgInfo[1] == "png"))
            {
                msg = "上传的文件格式不对!";
                return "{\"code\":\"-1\", \"msg\":\"" + msg + "\"}";
            }
            HttpPostedFileBase file = Request.Files[0];
            string name = file.FileName;
            Stream fileStream = file.InputStream;
            byte[] byimg = GetBytesFromImage(fileStream);
            int result = BLL.uploadPicFile(byimg, baseId, PicName);
            return "{\"code\":\"0\", \"msg\":\"\"" + "}";
        }


        //转流方法
        public byte[] GetBytesFromImage(Stream filename)
        {
            Stream fs = filename;
            int length = (int)fs.Length;
            byte[] image = new byte[length];
            fs.Read(image, 0, length);
            fs.Close();
            return image;
        }

后面直接将二进制流保存到数据库就可以了

 

标签:function,return,string,二进制,layui,result,msg,上传
来源: https://www.cnblogs.com/lily15146/p/16446295.html