wangeditor上传本地视频的方法
在官方版本的上传视频功能里,是不支持上传本地视频的,如果需要实现上传本地视频文件,可以自己定义一个上传方法。实现思路:1、使用input -> type=“file”,将透明度设为0.2、input的外层容器定位到富文本的菜单栏,并加上响应的样式,input的外层容器和input标签都设置到合适到宽高。3、创建fromData对象【new FormData()】,将需要上传的...
·
在官方版本的上传视频功能里,是不支持上传本地视频的,如果需要实现上传本地视频文件,可以自己定义一个上传方法。
实现思路:
1、使用input -> type=“file”,将透明度设为0.
2、input的外层容器定位到富文本的菜单栏,并加上响应的样式,input的外层容器和input标签都设置到合适到宽高。
3、创建fromData对象【new FormData()】,将需要上传的文件添加到该对象,以及服务端需要的一些参数也在这里一起添加
formData.append("key", "value");
4、引入axios(本人是在vue项目上的实践),通过axios的post方法上传即可,第一个参数是服务器的URL,第二个参数是上传所需的参数,包括文件本身。
// 引入axios
import axios from 'axios'
// 发起post请求
axios.post('serverUrl', 'param')
.then(res => {
// 请求成功即可获得后端返回的URL
})
到这一步就完成了视频上传
5、将视频插入到富文本
这个功能官方也没有提供现成的方法,需要自己利用wangeditor的api来实现
- 使用
editor.txt.append('<p>追加的内容</p>') 向编辑器追加内容
现在我们可以将p标签改为HTML5的video标签,并将上一步得到的URL设置为src属性的值,如:
editor.txt.append('<video src="url"></video>')
到这一步就完成了,希望能帮到有需求的朋友。
更多推荐
已为社区贡献4条内容
所有评论(0)