VUE中使用UEditor上传图片后如何回显
时间: 2024-05-10 15:17:55 浏览: 128
在使用UEditor上传图片后,可以通过以下步骤将图片回显到页面中:
1. 在UEditor配置文件中配置上传图片成功后的回调函数,如:
```javascript
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == "uploadimage") {
return "upload.php?action=uploadimage";
} else {
return this._bkGetActionUrl.call(this, action);
}
};
```
其中,返回的上传图片地址应该是后端处理上传图片的接口地址。
2. 在后端接口中处理上传的图片,并将图片的URL返回给前端,如:
```php
<?php
// 处理上传图片的代码,将图片保存到服务器上并获取图片URL
// ...
// 返回上传图片的URL
echo $imageUrl;
?>
```
3. 在UEditor的上传图片成功回调函数中,获取后端返回的图片URL,并将其设置到页面中,如:
```javascript
editor.addListener('afterUpfile', function(t, arg) {
var url = arg[0].url; // 获取后端返回的图片URL
var $img = $('<img>').attr('src', url); // 创建图片元素,并设置图片URL
$('#image-container').append($img); // 将图片添加到页面中
});
```
其中,`#image-container` 是用来展示上传图片的容器元素。
阅读全文