1. 程式人生 > 其它 >VUE檔案上傳

VUE檔案上傳

首先 上傳圖片的控制元件是

<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); } }