一、前端代码(vue)
<div id="cont" class="flex auto">
<div class="flex-cell-1">
<div class="photo" @click="fileclick()" >
<img class="img" :src="file + user.UserImg" alt="">
<input type="file" @change="filechange()" class="file none" name="file" id="file">
</div>
<p>请传输10MB以下的文件</p>
</div>
</div>
<script>
new Vue({
el:'#cont',
data(){
return{
file:'服务器地址/Images/',
UserImg:'',
}
},
mounted(){
},
methods:{
fileclick(){
$('.file').click();
},
filechange(){
//获取文件数组
var file = $('.file').get(0).files[0];
var formData = new FormData();
formData.append("file",file);
$.ajax({
url:'服务器地址/api/User/SaveImg',
data:formData,
type:'post',
processData:false,
contentType:false,
success:function(response){
if(response.isSuccess){
if(response.returnMsg != '' && response.returnMsg != null){
localStorage.setItem('UserImg',response.returnMsg);
}else{
localStorage.setItem('UserImg','');
}
//读取文件
var reader = new FileReader();
reader.readAsDataURL(file);
//读取成功,则执行方法函数
reader.onload = function(e){
$('.img').get(0).src = e.target.result;
}
}else{
console.log(response);
}
}
})
},
}
})
</script>
二、后台api代码
[Route("api/[controller]")]
[ApiController]
public class UserController : ControllerBase
{
private readonly IWebHostEnvironment _webHostEnvironment;
private IConfiguration _configuration { get; set; }
public UserController(IConfiguration config, IWebHostEnvironment webHostEnvironment)
{
_configuration = config;
_webHostEnvironment = webHostEnvironment;
}
//保存头像图片
[HttpPost]
[Route("SaveImg")]
public JsonResult SaveImg()
{
var formFile = Request.Form.Files[0];
var fileSize = formFile.Length;
if (fileSize > 1024 * 1024 * 10) //10M TODO:(1mb=1024X1024b)
{
return new JsonResult(new { isSuccess = false, resultMsg = "上传的文件不能大于10M" });
}
var currentDate = DateTime.Now;
var fileExtension = Path.GetExtension(formFile.FileName);//获取文件格式,拓展名
var saveName = formFile.FileName.Substring(0, formFile.FileName.LastIndexOf('.')) + "_" + currentDate.ToString("yyMMddHHmmss") + currentDate.Millisecond.ToString() + fileExtension;
string web_path = _webHostEnvironment.WebRootPath;
string path = web_path + "/Images/" + saveName;
var fs = System.IO.File.Create(path);
formFile.CopyTo(fs);
fs.Flush();
fs.Close();
return new JsonResult(new { isSuccess = true, returnMsg = saveName }); ;
}
}