vue.js異步上傳文件前后端實(shí)現(xiàn)代碼
本文實(shí)例為大家分享了vue.js異步上傳文件的具體代碼,供大家參考,具體內(nèi)容如下
上傳文件前端代碼如下:
<!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) { //設(shè)置文件名 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); }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue循環(huán)數(shù)組改變點(diǎn)擊文字的顏色
這篇文章主要為大家詳細(xì)介紹了vue循環(huán)數(shù)組改變點(diǎn)擊文字的顏色,非常實(shí)用的切換效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10Vue計(jì)算屬性與監(jiān)視(偵聽)屬性的使用深度學(xué)習(xí)
這篇文章主要介紹了Vue計(jì)算屬性與監(jiān)視(偵聽)屬性的使用,計(jì)算屬性指的是通過一系列運(yùn)算之后,最終得到一個(gè)值,watch監(jiān)視(偵聽)器允許開發(fā)者監(jiān)視數(shù)據(jù)的變化,從而針對(duì)數(shù)據(jù)的變化做特定的操作,本文就這兩種屬性給大家詳細(xì)講解,感興趣的朋友一起學(xué)習(xí)吧2022-11-11vue實(shí)現(xiàn)鼠標(biāo)滑動(dòng)預(yù)覽視頻封面組件示例詳解
這篇文章主要為大家介紹了vue實(shí)現(xiàn)鼠標(biāo)滑動(dòng)預(yù)覽視頻封面組件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07Vue中的v-for循環(huán)key屬性注意事項(xiàng)小結(jié)
這篇文章主要介紹了Vue中的v-for循環(huán)key屬性注意事項(xiàng)小結(jié),非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08vue實(shí)現(xiàn)動(dòng)態(tài)路由添加功能的簡(jiǎn)單方法(無廢話版本)
ue動(dòng)態(tài)路由(約定路由),聽起來好像很玄乎的樣子,但是你要是理解了實(shí)現(xiàn)思路,你會(huì)發(fā)現(xiàn)沒有想象中的那么難,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)動(dòng)態(tài)路由添加功能的簡(jiǎn)單方法,需要的朋友可以參考下2023-02-02vue + canvas實(shí)現(xiàn)涂鴉面板的示例代碼
這篇文章主要給大家介紹了vue + canvas實(shí)現(xiàn)涂鴉面板的示例,文章通過代碼示例介紹的非常詳細(xì),感興趣的小伙伴跟著小編一起來看看吧2023-08-08Vue+SpringBoot實(shí)現(xiàn)支付寶沙箱支付的示例代碼
本文主要介紹了Vue+SpringBoot實(shí)現(xiàn)支付寶沙箱支付的示例代碼,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06vue3的ref、isRef、toRef、toRefs、toRaw詳細(xì)介紹
本文詳細(xì)講解了vue3的ref、isRef、toRef、toRefs、toRaw,文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-09-09vite+vue3+element-plus項(xiàng)目搭建的方法步驟
因?yàn)関ue3出了一段時(shí)間了,element也出了基于vue3.x版本的element-plus,vite打包聽說很快,嘗試一下,感興趣的可以了解一下2021-06-06