vue .NET Core 多图上传 Base64 上传

前端代码vue element-ui

base64 上传时设置 :file-list="fileList"

<!--上传控件-->
<el-upload
action=''
ref="upload"
list-type="picture-card"
accept="image/jpeg,image/jpg,image/png"
:auto-upload="false"
 multiple
 :on-change='onChange'
 :file-list="files">
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>

//方法 获取上传图片
onChange(a, fileList) {
  this.files = fileList;
}
//Base64 上传处理
onChange(file, fileList) {
   this.files = []
   fileList.forEach(async item => {
      const img = await this.getBase64(item.raw);
      this.files.push(img);
   });
   console.log(this.files, 'files')
}
// 转base64编码
getBase64(file) {
  return new Promise((resolve, reject) => {
	const reader = new FileReader();
	let imgBase64 = '';
	reader.readAsDataURL(file);
	reader.onload = () => {
	  imgBase64 = reader.result;
	};
	reader.onerror = error => reject(error);
	reader.onloadend = () => resolve(imgBase64);
  });
},

//接口调用
this.fileData = new FormData()//先定义FormData 数据类型
this.fileData.append('useracode', this.useracode);//参数
this.fileData.append('username', this.username);//参数

for (let i = 0; i < this.files.length; i++) {
  this.fileData.append("files", this.files[i].raw, this.files[i].raw.name)//文件参数
}

//Base64 上传处理
this.fileData.append("files", JSON.stringify(this.files))

SaveInfo(this.fileData)
  .then((res) => {
	if (res.code == 0) {
	  this.$modal.msgSuccess('提交成功!')
	}
  })
  .catch((err) => {
  })




//base64上传 展示图片
//结合后端返回数据处理 
//var imgtype=img[0]; // data:image/jpeg;base64
//var imgbase64=img[1];//base64 转byte[]  Convert.FromBase64String(img[1])

img={
    imgtype,
    imgbase64
}
this.fileList.push({ url: img.imgtype + ',' + img.imgbase64 })

后端接口 .net:

参数
/// <summary>
/// 上传文件
/// </summary>
public List<IFormFile> Files { get; set; }


上传图片
foreach (var item in model.Files)
{
	if (item.Length > 0)
	{
		string[] ext = item.FileName.ToLower().Split('.');
		string fileext = ext[ext.Length - 1];
		if (exts.Where(x => x == fileext).Any())
		{
			if (!Directory.Exists(rootPath + fileDate))
				Directory.CreateDirectory(rootPath + fileDate);
			string savePath = rootPath + fileDate;
			var filename = fileDate + "_" + item_no + "_" + item.FileName;
			var filePath = Path.Combine(savePath, filename);
			using (var stream = System.IO.File.Create(filePath))
			{
				item.CopyToAsync(stream);
			}
			var name = filename.Replace("." + fileext, "");

			list.Add(new APPOINTMENT_ADDITIONAL_RECORD()
			{
				DSAC_ID = "",
				FILEI_MAGE = "/file/" + fileDate + "/" + filename,
				FILE_TYPE = fileext,
				FROM_TYPE = 2
			});
		}
		else
		{
			return Msg.Fail("上传附件类型不支持!");
		}
		item_no++;
	}
}

base64上传图片 
var Files = JsonConvert.DeserializeObject<List<string>>(model.Files);
if (Files != null)
{
	foreach (var item in Files)
	{
		var img = item.Split(",");
		var imgtype=img[0]; // data:image/jpeg;base64
		var imgbase64=img[1];//base64 转byte[]  Convert.FromBase64String(img[1])
	}
}

展示数据

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值