首页 > Web开发 > 详细

VUE文件上传

时间:2021-08-24 23:03:14      阅读:25      评论:0      收藏:0      [点我收藏+]

首先 上传图片的控件是

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

 

 

VUE文件上传

原文:https://www.cnblogs.com/unique-tongxue/p/15182531.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!