ueditor 前端直传OSS

最新推荐文章于 2024-07-07 18:38:03 发布

BMaru

最新推荐文章于 2024-07-07 18:38:03 发布

阅读量6.5k

点赞数 4

分类专栏：前端文章标签： ueditor webuploader OSS前端直传

本文链接：https://blog.csdn.net/u013684276/article/details/80143343

版权

本文详细介绍了如何配置ueditor以实现前端直接上传文件到阿里云OSS。步骤包括从后端获取签名，修改ueditor.all.js以实现单文件直传，更新图片拖拽和粘贴上传功能，以及调整多文件上传逻辑，确保所有上传操作都能直接与OSS交互。

摘要由CSDN通过智能技术生成

第一步

从后端获取签名参照https://help.aliyun.com/document_detail/31926.html

格式如下

第二步

修改单文件上传部分

打开 ueditor.all.js 定位到大概24579行,

屏蔽掉如下代码

domUtils.on(iframe, 'load', callback);
form.action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?':'&') + params);
form.submit();

添加如下代码：

$.get("修改为获取后端签名地址",{},function(ret){

var sign = JSON.parse(ret);
var form = new FormData();
var object_name = "文件名";
// 添加签名信息
form.append('OSSAccessKeyId', sign['accessid']);
form.append('policy', sign['policy']);
form.append('Signature', sign['signature']);
form.append('key', object_name);
// 添加文件
form.append('file', 文件对象);
$.ajax({
url: sign['host'],
data: form,
processData: false,
contentType: false,
type: 'POST'
}).done(function (ret) {
var link = sign['host'] + "/" + object_name;
loader = me.document.getElementById(loadingId);
loader.setAttribute('src', link);
loader.setAttribute('_src', link);
loader.setAttribute('title', '');
loader.setAttr