mui+vue文件上傳（圖片）

文件上傳是任何系統都必須具有的功能

1. 設置上傳按鈕

                    <div style="height: 30px; width: 30%; float: right; position: relative; text-align: right; padding-right: 0px; ">
                        <img id="btnFileSelect" src="../Resources/camera29.png" alt="" style="position: relative;top:-34px" />
                        <div class="FileSelectHide">
                            <input id="upFile" name="upFile" type="file" onchange="UpLoadImg(this)" />
                        </div>
                   </div>

這個按鈕是一個重疊的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();這個路徑是存儲在數據庫的系統配置的路徑，可以是固定的。