VUE檔案上傳
阿新 • • 發佈:2021-08-24
首先 上傳圖片的控制元件是
<input type="file" value="" v-on:change="upLoad" />
然後定義一個上傳圖片的方法
upLoad(event) { //獲取圖片 let file = event.target.files[0]; //配置頭部型別 let fd = new FormData(); fd.append("file", file); axios.post('/Info/UpLoad', fd).then(res => { if (res.data.code > 0) { this.proData.ImgUrl = res.data.fileName; alert('上傳成功') } else { alert(res.data.msg) } }) }
控制器要有一個對應的方法
//檔案上傳 [HttpPost] public ActionResult UpLoad() { try { //一、獲取前臺傳過來的檔案 var file = Request.Files[0]; //將虛擬路徑轉成物理路徑 var imgDir = Server.MapPath("/Images/"); //判斷你要儲存的資料夾是否存在,不存在建立//需要引用System.IO if (!Directory.Exists(imgDir)) { //建立資料夾 Directory.CreateDirectory(imgDir); } //儲存 file.SaveAs(imgDir + file.FileName); return Json(new {code = 1,fileName = file.FileName,msg="" }, JsonRequestBehavior.DenyGet); } catch (Exception ex) { return Json(new { code = 0, fileName = "", msg =ex.Message },JsonRequestBehavior.DenyGet); } }