core net vue 图片上传_vue,net core上传图片显示图片

html

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 传到前台赋到 就可以显示了