wangeditor结合netcore实现图片上传(iis)demo(代码片段)

kim-meng kim-meng     2023-04-05     152

关键词:

Index 页面:模拟调用controller.   实际应用中应该是各个外部系统

@
    ViewData["Title"] = "Home Page";

   
<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>



<div id="editor"></div>


<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () 

        InitEditor();
    );
    function InitEditor() 
        var E = window.wangEditor
        var editor = new E(#editor)
        editor.customConfig.menus = [
            head, // 标题
            bold, // 粗体
            fontSize, // 字号
            fontName, // 字体
            italic, // 斜体
            underline, // 下划线
            strikeThrough, // 删除线
            foreColor, // 文字颜色
            backColor, // 背景颜色
            link, // 插入链接
            list, // 列表
            justify, // 对齐方式
            quote, // 引用
            //‘emoticon‘,  // 表情
            image,  // 插入图片
            table, // 表格
            //‘video‘,  // 插入视频
            code, // 插入代码
            undo, // 撤销
            redo // 重复
        ]

        editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
        editor.customConfig.uploadImgMaxLength = 5;


        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: "http://X.X.X.X/FileUpload/ImagesUpload",
                beforeSend: function (xhr) 
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $(input:hidden[name="__RequestVerificationToken"]).val());
                ,
                data: uploadData,
                processData: false,
                contentType: false,
                async: false,
                success: function (response) 
                
                    for (var i = 0; i < response.length; i++) 
                        insert(response[i].url);
                    
                ,
                failure: function (response) 
                 
                    alert(response);
                
            );
        

        editor.create();



    

</script>

Controller:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;

namespace FileUpload.Controllers

    public class FileUploadController : Controller
    
        public IActionResult Index()
        
            return View();
        

        [HttpPost]
        public async Task<IActionResult> ImagesUpload([FromServices]IHostingEnvironment environment)
        
            List<URLTvm> list = new List<URLTvm>();
            var files = Request.Form.Files;
            string webRootPath = environment.WebRootPath;
            string contentRootPath = environment.ContentRootPath;
            foreach (var formFile in files)
            
                if (formFile.Length > 0)
                
                    var str_directory =  DateTime.Now.ToString("yyyyMMdd");
                    if (!Directory.Exists("D:Imagesupload" + str_directory))//如果不存在就创建file文件夹
                    
                        Directory.CreateDirectory("D:Imagesupload" + str_directory);
                    
                    var fileName = Guid.NewGuid().ToString() + ".jpg";
                    var path = Path.Combine("D:Imagesupload" + str_directory, fileName);
                    using (var stream = new FileStream(path, FileMode.CreateNew))
                    
                        await formFile.CopyToAsync(stream);
                        URLTvm st = new URLTvm();
                        st.url = @"http://X.X.X.X/wwwroot/Upload/" + str_directory+ "/"+ fileName;
                        list.Add(st);
                    
                
            

            return new JsonResult(list);

        

    

 

 

其中:

1.需要设置跨域。

2.IIS文件 结构为:

代码部署在C盘,网站下新建一个虚拟目录指向D盘(方便后期文件备份和拓展)。

技术图片

 

玩转图片上传————原生jsxmlhttprequest结合formdata对象实现的图片上传

varform=document.getElementById("formId");varformData=newFormData(form);varoReq=newXMLHttpRequest();oReq.onreadystatechange=function(){if(oReq.readyState==4){if(oReq.status==200){varjson=JSON.parse(oR 查看详情

wangeditor富文本编辑器结合vue使用(代码片段)

一、wangEditor3.1.1wangEditor富文本编辑器具体参数配置请参考官方文档:https://www.kancloud.cn/wangfupeng/wangeditor3/332599。二、实现图文编辑 1varE=window.wangEditor;2//vm.editor=newE(document.getElementById(‘editor‘));3vm.edit 查看详情

vue结合element实现自定义上传图片文件

参考了很多文献,感谢各位帖子,所以也想把自己遇到不会的东西分享出来,菜鸟一枚大家一进步!    查看详情

vue结合elementui实现图片上传可预览,可删除,以base64字符串上传到服务器(代码片段)

图片实现base64上传实现背景实现方式实现代码实现背景图片上传一般都是通过调用文件上传接口,返回图片地址,我们用拿到的图片地址进行相应操作,如表单提交等;但是最近有一个朋友遇到了一个问题,他们没有做图片管理,所以需... 查看详情

七牛云:ckeditorjssdk结合c#实现多图片上传。

成功了,搞了2天。分享一下经验。首先是把官方的那个例子下载下来,然后照如下的方式修改。其中tempValue是一个全局变量。functionsavetoqiniu(){ varuploader=Qiniu.uploader({ runtimes:"html5,flash,html4", browse_button:"setfile", save_key:false, //uptoken:q... 查看详情

基于spring+springmvc+mybatis开发书评网(十三)后台管理之wangeditor图片上传(代码片段)

...发的Web富文本编辑器,轻量、简洁、易用、开源免费wangeditor学习网址1、pom.xml引入依赖<!--SpringMVC文件上传底层依赖--><dependency>& 查看详情

vue结合element框架实现图片,文件,视频上传(代码片段)

上传文件的属性修改(这几个是常用,特记录下):1.自定义上传(默认为自动上传)需要设置::auto-upload=“false”2.name=‘appFile’:默认的上传的参数名为file,可以用name属性来修改3.:data属性是设... 查看详情

vue结合element框架实现图片,文件,视频上传(代码片段)

上传文件的属性修改(这几个是常用,特记录下):1.自定义上传(默认为自动上传)需要设置::auto-upload=“false”2.name=‘appFile’:默认的上传的参数名为file,可以用name属性来修改3.:data属性是设... 查看详情

wangeditor直接粘贴图片实现

很多时候我们用一些管理系统的时候,发布新闻、公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来。减少排版复杂的工作量。下面是借用百度doc来快速实现这个word粘贴到富文本... 查看详情

wangeditor5在vue3中的全使用过程(图片上传附件上传工具栏配置编辑器配置)(代码片段)

1、参考官方的wangeditor5-for-vue3的开发手册官方文档地址:https://clinfc.github.io/wangeditor5-for-vue3/guide/说明为说明要编写这编博客文章?官方文档的使用手册对于新手来说比较的难看懂,写的也不够详细,源码的封装比... 查看详情

ueditor结合七牛云存储上传图片附件和图片在线管理的实现和最新更新

最新下载地址:https://github.com/widuu/qiniu_ueditor_1.4.3Ueditor七牛云存储版本注意事项老版本请查看: https://github.com/widuu/qiniu_ueditor_1.4.3/tree/v1.0.0关于地址报错请修改 php/config.json 中的 uploadQiniuUrl&nbs 查看详情

wangeditor上传本地视频(代码片段)

一、实现效果实现效果原本效果二、源码下面是wangEditor实现插入视频的代码functionVideo(editor)this.editor=editor;this.$elem=$(‘<divclass="w-e-menu"><iclass="w-e-icon-play"></i></div>‘);this.type=‘panel‘;//当前是否acti... 查看详情

.netcore图片上传详解

首先有一点先确认下.netcore不存在Server.MapPath这个方法所以想引用服务器根目录或者web根目录应该在controller中引入IWebHostEnvironment对象privatereadonlyIWebHostEnvironment_hostingEnvironment;publicAdvertisementsController(IWebHostEnvironmentho 查看详情

前后端结合实现vue上传图片并预览效果node+mysql+vue+express(代码片段)

...,哈哈,通过node简单写了接口,实现前后端结合ÿ 查看详情

前后端结合实现vue上传图片并预览效果node+mysql+vue+express(代码片段)

...,哈哈,通过node简单写了接口,实现前后端结合ÿ 查看详情

wangeditor.cmd.do()在ie11插入图片失败的解决办法

参考技术A我原本按照官方文档的写法,在图片上传成功的回调里面将图片插入富文本框在ie11下图片上传成功了,但是图片插不进去。我去查了下源码,发现他其实是通过document.execCommand()去执行的。这里传的参数是insertHTML,ie不... 查看详情

javascript结合nodejs实现多文件上传

前端文件上传功能比较依赖后端,所以第一步用nodejs实现一个供文件上传的功能接口。因为本人对nodejs也是一知半解,所以刚开始的想法是像原始的ajax交互那样,获取上传文件的内容,然后再通过nodejs的buffer的知识,将获取到... 查看详情

在asp.netcore中上传文件

简介ASP.NETCore支持使用缓冲的模型绑定(针对较小文件)和无缓冲的流式传输(针对较大文件)上传一个或多个文件。传文件的作用1.上传是支持上传任何文件的,图片只是上传的一种。2.根据扩展名进行区分... 查看详情