前端代码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])
}
}
展示数据