百度富文本编辑器vue-ueditor-wrap单图上传，直传到阿里云OSS，纯前端处理

前言：

在网上找了很多相关内容，都是需要先上传至后端，然后再从后端传到OSS，或者就是传token什么的，根本不是我想要的效果。

话不多说直接上图：

 

刚开始主要是卡在富文本框的单图片上传按钮变灰，因为是需要后端接口的支持导致的，后来在网上看到可以直接将serverUrl配置为config.json的路径就可以进行选择文件了，主要代码如下：

serverUrl: '/UEditor/jsp/config.json', // 服务端接收请求的地址，这里改为本地config.json所在路径

虽然可以选择文件了，但是还没有配置上传功能，无法进行上传，所以我们要修改原有的上传功能，将下面代码屏蔽，修改为自己定义的

由于ueditor.all.min.js文件是压缩过的，我们需要把ueditor.all.js的代码复制到ueditor.all.min.js中，然后在大概24575行左右屏蔽代码：

 这样就可以进行上传了~

完整代码如下：

// 自定义上传
let storageScheme = window.localStorage.getItem('storageScheme');
if (storageScheme) {
    storageScheme = JSON.parse(storageScheme);
}
let shopCode = window.localStorage.getItem('shopCode');

let formData = new FormData();
let file = input.files[0]
let fileType = file.name.substring(file.name.lastIndexOf('.')+1)
let month = new Date().getMonth() + 1;
if (month.length == 1) {
    month = "0" + month;
}
let date = new Date().getFullYear() + '' + (month);
date = "1" + (209900 - date) + "-" + date;
let address = "img/shopFile/" + shopCode + "/" + date + '/' + randomNum() + '.' + fileType;
formData.append("policy", storageScheme.policy);
formData.append("signature", storageScheme.signature);
formData.append("ossaccessKeyId", storageScheme.accessId);
formData.append("key", address);
formData.append("dir", address);
formData.append('host', storageScheme.host);
formData.append('file', file);
let url = storageScheme.host
let xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.onload = function () {
    console.log('upload-success')
    loader = me.document.getElementById(loadingId);
    let imgUrl = url + "/" + address
    loader.setAttribute('src', imgUrl);
    loader.setAttribute('_src', imgUrl);
    loader.setAttribute('title', file.name || '');
    loader.setAttribute('alt', file.name || '');
    loader.removeAttribute('id');
    domUtils.removeClasses(loader, 'loadingclass');
};
xhr.send(formData);

相关参考：vue3中富文本编辑器 vue-ueditor-wrap 的使用