wangEditor3 上传本地视频和图片

一、js下载地址

https://download.csdn.net/download/i_am_yong_ge/11633651

二、前端：

引用wangEditor.js

var E = window.wangEditor
var editor = new E('#editor')
//开启配置
editor.customConfig.debug = true
// 隐藏“网络图片”tab
editor.customConfig.showLinkImg = true
// 关闭粘贴内容中的样式
editor.customConfig.pasteFilterStyle = false
// 忽略粘贴内容中的图片
editor.customConfig.pasteIgnoreImg = false
// 将图片大小限制为 3M
editor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024
// 限制一次最多上传 1 张图片
editor.customConfig.uploadImgMaxLength = 1
editor.customConfig.uploadImgServer = 'uploadImg'
editor.customConfig.uploadFileName = 'myFileName'

// 使用 base64 保存图片
editor.customConfig.uploadImgShowBase64 = true

editor.customConfig.uploadImgHooks = {
	customInsert: function (insertImg, result, editor) {
		var url =result.data;//获取后台返回的url
		console.log("image url = " + url)
		insertImg(url);
	}
};

//上传视频
editor.customConfig.uploadVideoServer = 'uploadVideo'

editor.customConfig.uploadVideoHooks = {
	customInsert: function (insertImg, result, editor) {
		var url =result.data;//获取后台返回的url
		console.log("video url = " + url)
		insertImg(url);
	}
};
editor.create();

三、后端

	@RequestMapping(value = "/uploadImg")
	@ResponseBody
	public Map<String, String> uploadImg(
			@RequestParam(value = "myFileName") MultipartFile file,
			HttpServletRequest request) {
		try {
			String type = file.getContentType();
			String uploadDir = request.getSession().getServletContext().getRealPath("/") + "upload\photo\";
			String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
			String curDate = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
			String fileName = curDate + "\" + System.currentTimeMillis() + suffix;
			String path = uploadDir + fileName;
			File myfile = new File(path);
			FileUtils.createDirectory(myfile);
			file.transferTo(myfile);

			String separator = System.getProperty("file.separator");
			String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath()
					+ separator + "upload" + separator + "photo" + separator;

			String str = basePath + fileName;
			Map<String, String> map = new HashMap<String, String>();
			map.put("data", str);
			return map;
		} catch (Exception e) {
			e.printStackTrace();
			return null;
		}
	}


	@PostMapping("/uploadVideo")
	@ResponseBody
	public synchronized Map uploadVideo(MultipartHttpServletRequest request) throws IOException {
		try {
			MultipartFile file = request.getFile("file");

			String type = file.getContentType();
			String uploadDir = request.getSession().getServletContext().getRealPath("/") + "upload\video\";
			String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
			String curDate = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
			String fileName = curDate + "\" + System.currentTimeMillis() + suffix;
			String path = uploadDir + fileName;
			File myfile = new File(path);

			FileUtils.createDirectory(myfile);
			file.transferTo(myfile);
			
			String separator = System.getProperty("file.separator");
			String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath()
					+ separator + "upload" + separator + "video" + separator;
			String str = basePath + fileName;
			
			Map<String,Object> map = new HashMap<String,Object>();
			map.put("data",str);
			map.put("errno",0);
			return map;
		} catch (Exception e) {
			e.printStackTrace();
			return null;
		}
	}

四、效果预览

五、注意

上传后，可能发现一切正常，但是没有图片
很有可能是没有编辑器还没有光标

下载积分快用完了，帮忙支持下哈
JS下载地址：https://download.csdn.net/download/i_am_yong_ge/11633651

六、参考资料：

https://blog.csdn.net/one_hwx/article/details/87652525

最后

以上就是尊敬奇异果为你收集整理的wangEditor3 上传本地视频和图片的全部内容，希望文章能够帮你解决wangEditor3 上传本地视频和图片所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。