百度富文本編輯器vue-ueditor-wrap單圖上傳，直傳到阿里云OSS，純前端處理

前言：

在網(wǎng)上找了很多相關(guān)內(nèi)容，都是需要先上傳至后端，然后再從后端傳到OSS，或者就是傳token什么的，根本不是我想要的效果。

話不多說直接上圖：

剛開始主要是卡在富文本框的單圖片上傳按鈕變灰，因為是需要后端接口的支持導(dǎo)致的，后來在網(wǎng)上看到可以直接將serverUrl配置為config.json的路徑就可以進(jìn)行選擇文件了，主要代碼如下：

serverUrl: '/UEditor/jsp/config.json', // 服務(wù)端接收請求的地址，這里改為本地config.json所在路徑

雖然可以選擇文件了，但是還沒有配置上傳功能，無法進(jìn)行上傳，所以我們要修改原有的上傳功能，將下面代碼屏蔽，修改為自己定義的

由于ueditor.all.min.js文件是壓縮過的，我們需要把ueditor.all.js的代碼復(fù)制到ueditor.all.min.js中，然后在大概24575行左右屏蔽代碼：

這樣就可以進(jìn)行上傳了~

完整代碼如下：

// 自定義上傳
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);

posted @ 2023-05-14 01:04 Oopy 閱讀(2322) 評論(0) 收藏舉報

刷新頁面返回頂部

Oopy

百度富文本編輯器vue-ueditor-wrap單圖上傳，直傳到阿里云OSS，純前端處理

公告

百度富文本編輯器vue-ueditor-wrap單圖上傳，直傳到阿里云OSS，純前端處理