时间:2021-05-26
本文实例为大家分享了vue.js异步上传文件的具体代码,供大家参考,具体内容如下
上传文件前端代码如下:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <script src="../js/vue.js"></script> <script src="../js/vue-resource.js"></script> <script src="../asset/js/jquery.js"></script></head><body> <div id="app"> <input type="file" @change="getFile($event)" /><button @click="upload">上传</button> <div>{{ result }}</div> <div v-show="uping==1">正在上传中</div> </div><script> new Vue({ el: '#app', data: { upath: '', result: '', uping:0 }, methods: { upload: function () { //console.log(this.upath); var zipFormData = new FormData(); zipFormData.append('filename', this.upath);//filename是键,file是值,就是要传的文件,test.zip是要传的文件名 let config = { headers: { 'Content-Type': 'multipart/form-data' } }; this.uping = 1; this.$http.post('http://localhost:42565/home/up', zipFormData,config).then(function (response) { console.log(response); console.log(response.data); console.log(response.bodyText); var resultobj = response.data; this.uping = 0; this.result = resultobj.msg; }); }, getFile: function (even) { this.upath = event.target.files[0]; }, } });</script></body></html>后端处理代码如下asp.net mvc的:
public ActionResult Up() { string msg = string.Empty; string error = string.Empty; string result = string.Empty; string filePath = string.Empty; string fileNewName = string.Empty; var files = Request.Files; if (files.Count > 0) { //设置文件名 fileNewName = DateTime.Now.ToString("yyyyMMddHHmmssff") + "_" + System.IO.Path.GetFileName(files[0].FileName); //保存文件 files[0].SaveAs(Server.MapPath("~/Uploads/" + fileNewName)); Thread.Sleep(10 * 1000); } return Json(new { msg = "上传成功", newfilename = fileNewName }, JsonRequestBehavior.AllowGet); }以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
项目简介基于vue.js的前端开发环境,用于前后端分离后的单页应用开发,可以在开发时使用ESNext、scss等最新语言特性。项目包含:基础库:vue.js、v
一、引入vue.js文件1.用脚本标签引入外部vue.js文件2.下面在一个新的标签里写vue的代码//vuejs代码写在这里varapp=newVue({el
本文实例为大家分享了Vue.js实现价格计算器功能的具体代码,供大家参考,具体内容如下实现效果:实现代码及注释:价格计算器/*隐藏未编译的数据绑定,直到Vue实
拖拽批量上传文件夹该组件基于Vue.js实现,UI框架是elementUI,完整的demo地址在https://github.com/Msxiaoma/uplo
本文实例为大家分享了jquery实现异步文件上传的具体代码,供大家参考,具体内容如下ajaxfileupload.js异步上传文件:直接引用。调用方法:$.aj