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