Vue-图片上传

后台代码

[HttpPost]
        public ActionResult UpLoad() {
            try
            {
                //获取前台传过来的文件
                var file = Request.Files[0];
                //将虚拟路径转换成物理路径
                var imgDir = Server.MapPath("/Images/");
                //判断你要存储的文件夹是否存在，如果不在就创建文件夹
                if (!Directory.Exists(imgDir))
                {
                    //创建文件夹
                    Directory.CreateDirectory(imgDir);
                }
                //将虚拟路径转化魏物理路径
                file.SaveAs(imgDir + file.FileName);
                return Json(new { code = 1, fileName = file.FileName }, JsonRequestBehavior.DenyGet);
            }
            catch (Exception ex)
            {
                return Json(new { code = 0, fileName = "",msg=ex.Message }, JsonRequestBehavior.DenyGet);
                throw;
            }
        }

在前台Vue里进行调用

upLoad(event) {
                //获取图片
                let file = event.target.files[0];
                //配置
                let config = {
                    headers: {
                        'Context-Type':"multipart/form-data"
                    }
                }

                let fd = new FormData();
                fd.append("file", file);

                axios.post('/default/UpLoad', fd, config)
                    .then(res => {
                        if (res.data.code > 0) {
                            this.shopData.Img = res.data.fileName;
                            alert('上传成功');
                        } else {
                            alert(res.data.msg);
                        }
                    })
            }