在最近的工作中需要用到富文本编辑器,结合项目的UI样式以及业务需求,选择了wangEditor.另外在使用的过程中发现wangEditor只有上传图片和视频的功能,没有上传文本附件的功能,所以需要对其扩展一个上传附件的功能. 我们的项目前端是用的react框架,在这里就记录一下我在项目中对wangEditor的简单封装使用以及扩展上传附件菜单. 需要购买阿里云产品和服务的,点击此链接领取优惠券红包,优惠购买哦,领取后一个月内有效: https://promotion.aliyun.com/ntm

需求背景 由于现有的后台管理系统,上传的视频越来越大,加上上传视频较慢,后端小哥提出直接从前端上传视频或者其他文件到阿里云OSS存储. 阿里云OSS 阿里云OSS文档介绍,这里不做过多赘述 安装 原本在最开始的时候,是使用node版本的SDK,最开始使用的[nodejs版本] 代码如下 async function put() { try { let result = await client.put('qq.mp4', fileObj); console.log(result); } catc

写在前面 红旗不倒,誓把JavaScript进行到底!今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理(React + Node),花了一些时间,希望对你有所帮助. 前端实现 遵循React 组件化的思想,我把图片上传做成了一个独立的组件(没有其他依赖),直接import即可. import React, { Component } from 'react' import Upload from '../../components/FormControls/Upload/' /

react-uplod-img 是一个基于 React antd组件的图片上传组件 支持oss qiniu等服务端自定义获取签名,批量上传, 预览, 删除, 排序等功能 需要 react 版本大于 v16.1.0 支持async await git地址 demo 安装 npm i react-uplod-img --save 引入 import UpImage from 'react-uplod-img' 调用 const getOSSSign = (suffix,width,height, e

wangEditor上传大图片时候会 上传超时.后端没有问题,我百度很多,又去群里问,都得不到答案.最后问同事,有个属性  editor.config.uploadTimeout = 100000000; 加上这个属性居然可以了! 但是这个属性文档没有,百度也没有....如果你们谁知道这属性哪里找的到,评论告诉我下呗.谢谢.

最近有个需求出现在我的视野中,因为我的另外的博客需要上传文章,但是我不想每次都在我的数据库中慢慢的修改格式,所以我另做了一个后台去编辑文本后发送给服务器,那么这里就涉及到两点,一个是富文本,一个是需要图片添加之后立即回显图片,那么我们现在就进入这个需求的解决吧 首先既然是使用wangeditor这个富文本编辑器,当然第一件事是在你的项目中,下载这个npm包,这里我默认大家已经有新建了一个React项目. npm install wangeditor --save 下载完成后,需要在自己的组件中导

一.业务场景 公司的样本检测报告以React页面的形式生成,已调整为A4大小的样式并已实现分页,业务上需要将这个网页生成PDF文件,并上传到服务器,后续会将这个文件发送给客户(这里不考虑). 二.原来的实现形式 浏览器原生方法:window.print()可以将网页保存为PDF文件,由于检测报告的网页已经调整为A4的样式,所以保存下来后即是一个标准的PDF文档,然后将保存下来的PDF文件上传到服务器,即可实现需求. 三.存在的问题 调用window.print()方法后需要手动保存PDF到本地,

首先要准备react开发环境以及js-xlsx插件 1. 此处省略安装react安装步骤 2.下载js-xlsx插件 yarn add xlsx 或者 npm install xlsx 在项目中引入 import * as XLSX from 'xlsx'; 定义插件,并暴露出去 /** * @author tangzedong.programmer@gmail.com * @apiNote excel预览插件 * @since 2019-02-14 10:36:42 */ export def

asp.net core 通过ajax上传图片 .net core前端代码,因为是通过ajax调用,首先要保证ajax能调用后台代码,具体参见上一篇.net core 使用ajax调用后台代码. 前端代码如下: @Html.AntiForgeryToken() @{await Html.RenderPartialAsync("_ValidationScriptsPartial");} <div> <form id="uploadForm">

记录一下上传文件时将文件数据转为Base64的方法 通过 FileReader对象创建一个实例,然后使用 readAsDataURL方法将数据转为Base64格式 注意: 读取过程是异步的 绑定onload事件,该事件在数据读取完成后触发 具体代码(react项目中): const reader = new window.FileReader(); reader.readAsDataURL(fileObject); reader.onload = () => { Base64Data = rea

let common_url = 'http://192.168.1.1:8080/'; //服务器地址 let token = ''; //用户登陆后返回的token /** * 使用fetch实现图片上传 * @param {string} url 接口地址 * @param {JSON} params body的请求参数 * @return 返回Promise */ function uploadImage(url,params){ return new Promise(function

React Native端 使用react-native-image-picker 做出选择图片的操作,选择完成后,直接将图片Post至服务器,保存在服务器的某个地方(保存图片的路径需要公开显示),并返回图片的URL地址,Android应用中,只保存图片的URL地址. component中代码 _chooseImage() { ImagePicker.showImagePicker(options, (response) => { console.log('Response = ', respo

今天开始我将写nodejs框架egg.js, react 实现的增删改查,文件上传等常用的b/s场景,这个将分3部分来写. 会让你在60分钟内快速 入口并应用~  你应该用es6, node,或是php, python等基本知识.知道基本的sql (mysql) 第一部分我们先实现增删改查: product directiory: 未完待续...

react-native-image-picker作为一个集成相机和相册的功能的第三方库,因为其使用相对简单受到前端开发人员的喜爱. react-native-image-picker使用 首先,安装下该插件. npm install react-native-image-picker@latest --save 2. 针对Android和iOS平台分别进行配置 ## android 平台配置 1. 在android/settings.gradle文件中添加如下代码: include ':rea

React实战之Ant Design—Upload上传_附件上传 Upload组件大家都在官方文档中看过了,但写的时候还是会遇到许多问题,一些新手看了文档后感觉无从下手,本文过多的简绍就不说了,直接看代码和注释,直接用就行 我直接放在form表单中,因为实战中单个附件上传很少几,乎都在form表单中加入一个附件上传所以为了更好的应用,我直接就放在form表单中应用 import React, { PureComponent } from 'react'; import {Form, Button

业务需求: 通过后台编辑文章和图片,上传到前端界面,展示新闻消息模块.这个时候,需要一款简洁的编辑器,百度编辑器是最常用的一种,但是功能太过于复杂,而wangEditor - 轻量级web富文本编辑器,配置方便,使用简单.支持 IE10+ 浏览器,值得拥有. wangEditor -- 轻量级 web 富文本编辑器,配置方便,使用简单.支持 IE10+ 浏览器. 官网:www.wangEditor.com 文档:www.kancloud.cn/wangfupeng/wangeditor3/332

引入js文件 <script type="text/javascript" src="style/js/wangEditor.min.js"></script> 新建div名字任意 <div id="editor"> </div> 创建富文本编辑器 var E = window.wangEditor; var editor = new E('#editor'); editor.customConfi

一.上传 formidable天生可以处理上传的文件,非常简单就能持久上传的文件. 今天主要讲解的是,前后端的配合套路. 上传分为同步.异步.同步公司使用非常多,异步我们也会讲解. 1.1 先看一下antd中的Form和代码校验 我们看antd中的Form组件,https://ant.design/components/form-cn/ 所谓的装饰器指的是将一个组件作为一个函数的参数. MyForm是一个标准的组件,要用Form.create()()装饰一下. const WrappedRegi

最近在公司做React+antd的项目,遇到一个上传组件的问题,即上传附件成功后,文件展示处仍然还有之前上传附件的缓存信息,需要解决的问题是,要把上一次上传的附件缓存在上传成功或者取消后,可以进行清除 经过一顿试错,终于解决了这个问题. showUploadList,是可选参数,即是否展示uploadList,默认是开启的,showUploadList:true即为展示,效果是当附件上传成功后,会在页面上显示出上传的附件名字记录,如上图所示. 需要解决的问题是:在有上传按钮的弹出框里,当上传附件

见章知著 1024,程序员们节日快乐!本文主要讲述react配合antd以及react-img-crop第三方库实现一个可控的图片上传功能. 运行项目 需要具有node环境 第三方库安装 1.antd(Upload)安装和初始化 1.1.在代码编辑器(VS-Code或者其他编辑器)代开终端,输入命令行安装antd: $ yarn add antd --save 或者 $ npm install antd --save 1.2.安装好antd后,修改src/App.css,在新建的项目中引入ant