Iview-admin: 建议:增加富文本编辑器中图片、视频的在线上传功能

Created on 18 Oct 2017  ·  4Comments  ·  Source: iview/iview-admin

建议:增加富文本编辑器中图片、视频的在线上传功能,如果可以的话,最好图片视频可以通过配置直接上传到阿里云OSS、七牛、又拍云等外部云上,或者写个教程让我们自己开放也行,这样可以方便资源的统一管理。谢谢大神。

Most helpful comment

富文本编辑器的的图片上传我是这样实现的(参考tinymce的文档写的):

images_upload_url: urls.uploadImage,
                images_upload_credentials: false,
                images_upload_handler: (blobInfo, success, failure) => {
                    let xhr, formData;
                    xhr = new XMLHttpRequest();
                    xhr.withCredentials = false;
                    xhr.open('POST', urls.uploadImage);
                    xhr.setRequestHeader('Authorization', 'Bearer ' + this.$store.state.access_token);
                    xhr.onload = function () {
                      let json;
                      if (xhr.status != 200) {
                        failure('HTTP Error: ' + xhr.status);
                        return;
                      }
                      success(xhr.responseText);
                    };
                    formData = new FormData();
                    formData.append('file', blobInfo.blob(), blobInfo.filename());
                    xhr.send(formData);
                }

All 4 comments

富文本编辑器中上传图片视频的功能很快下一小版本会添加,谢谢建议

收到您的回复十分欢喜,谢谢大神

富文本编辑器的的图片上传我是这样实现的(参考tinymce的文档写的):

images_upload_url: urls.uploadImage,
                images_upload_credentials: false,
                images_upload_handler: (blobInfo, success, failure) => {
                    let xhr, formData;
                    xhr = new XMLHttpRequest();
                    xhr.withCredentials = false;
                    xhr.open('POST', urls.uploadImage);
                    xhr.setRequestHeader('Authorization', 'Bearer ' + this.$store.state.access_token);
                    xhr.onload = function () {
                      let json;
                      if (xhr.status != 200) {
                        failure('HTTP Error: ' + xhr.status);
                        return;
                      }
                      success(xhr.responseText);
                    };
                    formData = new FormData();
                    formData.append('file', blobInfo.blob(), blobInfo.filename());
                    xhr.send(formData);
                }

这个可以看tinymce的官方文档的教程自行根据业务需求添加

Was this page helpful?
0 / 5 - 0 ratings