图片上传（vue）

一，VUE实现简单的图片上传

下面前台代码，方便回忆（使用vue）

ImgLoad(event) {
                let files = event.target.files[0];

                //设置头部配置 可传文件（可以不写）
                let config = {
                    headers: {
                        'Context-type':"multipart/form-data"
                    }
                }

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

                axios.post('/Goods/Upload', fd).then(u => {
                    if (u.data.code > 0) {
                        this.formdata.Img = u.data.fileName;
                    }
                    else {
                        alert("上传失败");
                    }
                })
            }

二，后台处理图片

见代码，图片的简略上传方式（仅上传到当前项目文件夹中）

内含细节创建文件夹

[HttpPost]
        public ActionResult Upload(HttpPostedFileBase files)
        {
            try
            {
                //将虚拟路径改为物理路径  imgDir：图片的物理路径
                var imgDir = Server.MapPath("/Images/");
                //判断是否有此文件夹(Images)
                if (!Directory.Exists(imgDir))
                {
                    //创建文件夹
                    Directory.CreateDirectory(imgDir);
                }
                //保存图片
                files.SaveAs(imgDir +files.FileName);
                return Json(new { code = 1, fileName = files.FileName }, JsonRequestBehavior.DenyGet);
            }
            catch (Exception)
            {

                return Json(new { code = 0, fileName = files.FileName }, JsonRequestBehavior.DenyGet);
            }
            
        }

此番操作下来，活生生的图片就上传进来了

 

注：vue中的事件参数  $event  里面有很多自带的对象 通过该对象自带的一些属性，我们可以避免过多的冗余代码，细化代码