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">就可以显示了