
正文
Vue.js 上传文件(后台使用.net)
提示:扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
页面部分
<div id="app">
<form id="myform">
<input type="file" name="fileup" id="fileup" v-on:change="fileChange($event)" />
</form> <br />
{{img}}
</div>
<script type="text/javascript"> var app = new Vue({
el: "#app",
data: {
img:""
},
methods: {
fileChange: function (el) {
if (!el.target.files[].size) return; var obj = new FormData(document.getElementById("myform"));
obj.append("name", "wzh");
var _this = this;
$.ajax({
type: 'post',
url: '/home/ajax',
data: obj,
cache: false,
processData: false, // 不处理发送的数据,因为data值是Formdata对象,不需要对数据做处理
contentType: false, // 不设置Content-type请求头
success: function (res) {
var arr=res.split(':');
if(arr[]=="ok"){
_this.img=arr[];
}else{
alert(arr[]);
}
},
});
},
}
})
</script>
Controller
public ActionResult ajax()
{
try
{
HttpPostedFileBase uploadfile = Request.Files["fileup"];
if (uploadfile == null)
{
return Content("no:非法上传");
}
if (uploadfile.FileName == "")
{
return Content("no:请选择文件");
} string fileExt = Path.GetExtension(uploadfile.FileName);
StringBuilder sbtime = new StringBuilder();
sbtime.Append(DateTime.Now.Year).Append(DateTime.Now.Month).Append(DateTime.Now.Day).Append(DateTime.Now.Hour).Append(DateTime.Now.Minute).Append(DateTime.Now.Second);
string dir = "/UploadFile/" + sbtime.ToString() + fileExt;
string realfilepath = Request.MapPath(dir);
string readDir = Path.GetDirectoryName(realfilepath);
if (!Directory.Exists(readDir))
Directory.CreateDirectory(readDir); uploadfile.SaveAs(realfilepath);
return Content("ok:" + dir);
}
catch (Exception ex)
{
return Content("no:" + ex.Message);
}
}






