• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

asp.netcore通过ajax上传图片及wangEditor图片上传

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

.net core前端代码,因为是通过ajax调用,首先要保证ajax能调用后台代码,具体参见上一篇.net core 使用ajax调用后台代码。

前端代码如下:

@Html.AntiForgeryToken()   
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<div>
        <form id="uploadForm">
            AJAX上传多文件: <input type="file" name="file" multiple />
            <input type="button" value="上传" onclick="doUpload()" />
        </form>
    </div>
    <script>
        function doUpload() {
            var formData = new FormData($("#uploadForm")[0]);
            $.ajax({
                  url: "Train?handler=Upload",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                type: 'POST',
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (returndata) {
                    alert(returndata);
                },
                error: function (returndata) {
                    alert(returndata);
                }
            });
        }
    </script>

 

后端代码:

 [HttpPost]
        public async Task<IActionResult> OnPostUpload([FromServices]IHostingEnvironment environment)
        {
            List<TmpUrl> list = new List<TmpUrl>();
            var files = Request.Form.Files;
            string webRootPath = environment.WebRootPath;
            string contentRootPath = environment.ContentRootPath;
            foreach (var formFile in files)
            {
                if (formFile.Length > 0)
                {
                    var fileName = Guid.NewGuid().ToString()+".jpg";
                    var path = Path.Combine(environment.WebRootPath + "\\images\\upload", fileName);
                    using (var stream = new FileStream(path, FileMode.CreateNew))  
                    {
                        await formFile.CopyToAsync(stream);
                        TmpUrl tu = new TmpUrl();
                        tu.Url = @"/images/upload/"+ fileName;
                        list.Add(tu);
                    }
                }
            }
            
            return new JsonResult(list);

        }

注:var stream = new FileStream(path, FileMode.CreateNew,开始这里的path指定了一个文件夹,没有包括文件名称,没有指定具体的路径,一直报错

提示:路径访问禁止,access deny...,文件夹的所有权限都改了(添加net work 、IIS User),还是不行..。坑啊,改成完整路径就可以了。

另外,在后台代码没有设置为异步时出现问题,在进行图片上传时,重新运行程序后,第一张可以上传成功,然后再上传,传到服务端的图片大小为0。

代码设置为异步后,问题解决

 结合wangEditor图片上传接口

这里是使用自定义的图片上传接口,具体实现就是上面的,然后返回图片的url,调用wangEditor里的insert(imageUrl)方法在文本编辑器中插入图片。

后端代码和就是上面那一段后端代码,前端代码如下:

<head>
    <meta charset="UTF-8">
    <title>wangEditor demo</title>
    <script src="~/js/wangEditor.js"></script>
    <script src="~/js/jquery.js"></script>
</head>
<div id="editor">
        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
    </div>
    
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script type="text/javascript">
        var E = window.wangEditor;
        var editor = new E('#editor');

        //editor.customConfig.uploadImgServer = 'Train?handler=Upload'; //上传URL
        editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
        editor.customConfig.uploadImgMaxLength = 5;
        //editor.customConfig.uploadFileName = 'myFileName';

        editor.customConfig.customUploadImg = function (files, insert) {
            // files 是 input 中选中的文件列表
            // insert 是获取图片 url 后,插入到编辑器的方法
            var uploadData = new FormData();
            for (var i = 0; i < files.length; i++) {
                uploadData.append(files[i].name, files[i]);
            }

            $.ajax({
                type: "POST",
                url: "Train?handler=Upload",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                data: uploadData,
                processData: false,
                contentType: false,
                async: false,
                success: function (response) {
                    alert(response);
                    for (var i = 0; i < response.length; i++) {
                        insert(response[i].url);
                    }
                },
                failure: function (response) {
                    alert(response);
                }
            });
          
            //editor.customConfig.uploadImgHooks = {
            //    customInsert: function (insertImg, result, editor) {
            //        // 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
            //        // insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果

            //        // 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
            //        for (var i = 0; i < length; i++) {

            //        }
            //        //var url = result.data;
            //        //insertImg(url);

            //        // result 必须是一个 JSON 格式字符串!!!否则报错
            //    }
            //}
            // 通过 url 参数配置 debug 模式。url 中带有 wangeditor_debug_mode=1 才会开启 debug 模式
            editor.customConfig.debug = location.href.indexOf('wangeditor_debug_mode=1') > 0;
            //editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片

            // 上传代码返回结果之后,将图片插入到编辑器中
            //insert(imgUrl)
        }

        editor.create();
    </script>

wangEditor

这个文本编辑器可以上传本地图片、网络图片,上传本地图片按钮默认是不显示的,只有在配置中启用了本地上传相关配置才显示,  editor.customConfig一系列的。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap