mui+vue文件上传（图片）

文件上传是任何系统都必须具有的功能

1. 设置上传按钮

这个按钮是一个重叠的img和button 只显示img 也可以不要img直接显示input也可以 ，下面是样式。

        .FileSelectHide {
            width: 30px;
            height: 32px;
            overflow: hidden;
            position: relative;
            background-image: none;
            background-attachment: scroll;
            background-repeat: no-repeat;
            background-position-x: center;
            background-position-y: center;
            background-size: auto;
            background-origin: padding-box;
            background-clip: border-box;
            background-color: transparent;
            margin-top: -34px;
            float: right;
        }

            .FileSelectHide input {
                height: 34px;
                width: 50px;
                right: 0px;
                bottom: 0px;
                font-size: 20px;
                filter: alpha(opacity=0);
                position: absolute;
                cursor: pointer;
                outline-width: medium;
                outline-style: none;
                outline-color: invert;
                opacity: 0;
                float: right;
            }

2.添加点击事件

   function UpLoadImg(file) {
   //弹出对话框后选择文件  该文件会立即显示出来。然后在进行后台的处理
            var oFReader = new FileReader();
            oFReader.readAsDataURL(file.files[0]);
            oFReader.onloadend = function (oFRevent) {
                var src = oFRevent.target.result;
                $("#showImg").attr("src", src);
            }
            ///
            var fileId = $("#upFile").attr("Id");
            var url = '/Media/UploadImg';
            //文件上传
            ajaxFileUpload(fileId, url, null);

        }

        function ajaxFileUpload(elementId, url, sendData) {
            var obj = {
                url: url,//用于文件上传的服务器端请求地址
                fileElementId: elementId,//文件上传空间的id属性
                type: 'POST',
                dataType: 'JSON',
                data: sendData,
                success: function (data, status) {
                    if (data.UpSucceed == 'True' && data.FileName != null) {
                        app.DetailContent.PicName = data.FileName;//将返回的文件名保存到vue的对象中
                        localStorage.setItem('img',data.FileName);//保存前的临时存储
                        mui.toast("上传成功");
                    } else {
                        $("#showImg").attr("src", '');
                    }

                },
                error: function (xhr, status, p3, p4) {
                    mui.toast("上传失败");
                    $("#showImg").attr("src", '');
                }
            };
            $.ajaxFileUpload(obj);
            return false;
        }

说明：以上文件保存成功后返回的数据是通过一个视图完成的 文章链接https://blog.csdn.net/fwq_17802927858/article/details/97147607

2.后台接收处理

[HttpPost]
        public ActionResult UploadImg()
        {

            int res = 0;

            int length = Request.Files.Count;
            if (length == 0)
                return new EmptyResult();
            var file = Request.Files[0];
            var name = file?.FileName;
            var folder = getPicFolderPath();
            var savePath = folder + name;
            try
            {
                if (!string.IsNullOrEmpty(folder))
                {
                    if (!Directory.Exists(folder))
                    {
                        Directory.CreateDirectory(folder);
                    }
                    file?.SaveAs(folder + name);
                    res += 1;
                }
            }
            catch (Exception ex)
            {
                res = 0;
                throw ex;
            }
            var model = new FileModel();
            model.FileName = name;
            model.FilePath = savePath;
            model.UpSucceed = res == 1;
            return View("FileUpLoad", model);


        }

说明：这个View:FileUpLoad就是保存返回的数据的FileModel,再ajax的success方法的参数data能够体现出来。 var folder = getPicFolderPath();这个路径是存储在数据库的系统配置的路径，可以是固定的。