zoukankan      html  css  js  c++  java
  • vue,net core上传图片显示图片

    html

          <label>
                  <input type="file" @change="tirggerFile($event)" />
                </label>

     script

    methods: {
        tirggerFile: function(event) {
          var self = this;
          var file = event.target.files[0]; // (利用console.log输出看file文件对象)
          this.fromdata = new FormData();
          this.fromdata.append("File", file);
          var reader = new FileReader();
          reader.readAsDataURL(file); // 读出 base64
          reader.onload = function(e) {
            //后缀名称
            self.filesuffix = "." + file.name.split(".")[1];
            // 页面显示的base64
            self.imgcode = e.target.result;
            //向后台传入的base64
            self.basels = self.imgcode.split(",")[1];
          };
        },
        getFile() {
          this.$axios
            .post( "/UserInfoFileData",this.fromdata )
            .then(response => {
              if (response.data != "0") {
                this.EditUser();
              } else {
                console.log("保存失败");
              }
            })
            .catch(response => {
              console.log(response);
            });
        },

    后台api

    把图片base64存在数据库的二进制类型表中,记得把图片的后缀存上

    [HttpPost]

     public ActionResult FileData(Microsoft.AspNetCore.Http.IFormFile? file)
            {

        //数据库
                Qrcode modellist = new Qrcode();
                //获取后缀
                var Exttype = file.ContentType.Replace("image/", ".");
                Stream fs = file.OpenReadStream();
                BinaryReader br = new BinaryReader(fs);
                byte[] imgBytesIn = br.ReadBytes((int)fs.Length);
                modellist.Image = imgBytesIn; //数据库的Image的类型是二进制

        modellist.Ext = Exttype;//图片后缀

                return new JsonResult(gzhContext.SaveChanges());
            }

    展示图片

    先把图片二进制转base64

     string img = Convert.ToBase64String(数据库中取到二进制);

     var erjinzhi = "data:" + 数据库中存的图片后缀+ ";base64," + img;

    把  erjinzhi 传到前台赋到 <Img src = "erjinzhi">就可以显示了

  • 相关阅读:
    html5shiv.js-让IE浏览器支持HTML5标准
    CSS2系列:外边距合并问题(margincollapse)
    HTML5:离线存储(缓存机制)-IndexDB
    CSS3系列:流式(弹性)布局(flex布局)
    Sublime Text 3 常用插件以及安装方法(转)
    后台配置参数写在文件上
    20160414
    2016413
    20160412
    网页设计素材网站
  • 原文地址:https://www.cnblogs.com/aghk/p/12867479.html
Copyright © 2011-2022 走看看