本文实例为大家分享了vue。js异步上传文件的具体代码,供大家参考,具体内容如下
上传文件前端代码如下:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; title> & lt;/title>
& lt;元charset=" utf - 8 "/比;
& lt;脚本src=" https://www.yisu.com/js/vue.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/js/vue-resource.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/asset/js/jquery.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=坝τ谩北?
& lt;输入类型=拔募盄change=癵etFile(事件)美元”/祝辞& lt;按钮@click=吧洗痹谏洗? lt;/button>
& lt; div>{{结果}}& lt;/div>
& lt; div v-show="了==1”在正在上传中& lt;/div>
& lt;/div>
& lt; script>
新Vue ({
埃尔:“#应用”,
数据:{
upath:”,
结果:”,
了:0
}，
方法:{
上传:函数(){//console.log (this.upath);
var zipFormData=https://www.yisu.com/zixun/new FormData ();
zipFormData。追加(“文件名”,this.upath);//文件名是键,文件是值,就是要传的文件,test.zip是要传的文件名
让配置={标题:{“内容类型”:“多部分/格式”}};
这一点。了=1;
美元http。文章(http://localhost: 42565/home/, zipFormData,配置)。然后(函数(响应){
console.log(响应);
console.log (response.data);
console.log (response.bodyText);
var resultobj=response.data;
这一点。了=0;
这一点。结果=resultobj.msg;
}）;
}，
getFile:函数(甚至){
这一点。upath=event.target.files [0];
}，
｝
}）;
& lt;/script>
& lt;/body>
& lt;/html>
之前
后端处理代码如下asp.net mvc的:
公共ActionResult ()
{
字符串味精=string.Empty;
字符串错误=string.Empty;
字符串的结果=string.Empty;
字符串filePath=string.Empty;
字符串fileNewName=string.Empty;=Request.Files var文件;
如果文件。数比;0）
{//设置文件名
fileNewName=DateTime.Now.ToString (“yyyyMMddHHmmssff”) +“_”+ System.IO.Path.GetFileName(文件[0].FileName);//保存文件
文件[0].SaveAs(服务器。MapPath(~/上传/+ fileNewName));
线程。睡眠(10 * 1000);
｝
返回Json(新{味精="上传成功”,newfilename=fileNewName}, JsonRequestBehavior.AllowGet);
｝
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
