简单配置 wangeditor 前端获取签名后直传图片到阿里云oss

引用下面的AliOssHelper.js,更改文件里的"获取签名接口"

var Snowflake = (function () {
    const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz123456789';
    const base62Encode = (value, result) => (value == 0) ? result : base62Encode(Math.floor((value / alphabet.length)), (alphabet.charAt(value % alphabet.length) + result));

    function Snowflake(_workerId, _dataCenterId, _sequence) {
        _workerId = _workerId || 1n;
        _dataCenterId = _dataCenterId || 1n;
        _sequence = _sequence || 1n;
        this.twepoch = 1288834974657n;
        //this.twepoch = 0n;
        this.workerIdBits = 5n;
        this.dataCenterIdBits = 5n;
        this.maxWrokerId = -1n ^ (-1n << this.workerIdBits); // 值为：31
        this.maxDataCenterId = -1n ^ (-1n << this.dataCenterIdBits); // 值为：31
        this.sequenceBits = 12n;
        this.workerIdShift = this.sequenceBits; // 值为：12
        this.dataCenterIdShift = this.sequenceBits + this.workerIdBits; // 值为：17
        this.timestampLeftShift = this.sequenceBits + this.workerIdBits + this.dataCenterIdBits; // 值为：22
        this.sequenceMask = -1n ^ (-1n << this.sequenceBits); // 值为：4095
        this.lastTimestamp = -1n;
        //设置默认值,从环境变量取
        this.workerId = 1n;
        this.dataCenterId = 1n;
        this.sequence = 0n;
        if (this.workerId > this.maxWrokerId || this.workerId < 0) {
            throw new Error('_workerId must max than 0 and small than maxWrokerId-[' + this.maxWrokerId + ']');
        }
        if (this.dataCenterId > this.maxDataCenterId || this.dataCenterId < 0) {
            throw new Error('_dataCenterId must max than 0 and small than maxDataCenterId-[' + this.maxDataCenterId + ']');
        }

        this.workerId = BigInt(_workerId);
        this.dataCenterId = BigInt(_dataCenterId);
        this.sequence = BigInt(_sequence);
    }

    Snowflake.prototype.tilNextMillis = function (lastTimestamp) {
        var timestamp = this.timeGen();
        while (timestamp <= lastTimestamp) {
            timestamp = this.timeGen();
        }
        return BigInt(timestamp);
    };
    Snowflake.prototype.timeGen = function () {
        return BigInt(Date.now());
    };
    Snowflake.prototype.nextId = function () {
        var timestamp = this.timeGen();
        if (timestamp < this.lastTimestamp) {
            throw new Error('Clock moved backwards. Refusing to generate id for ' +
                (this.lastTimestamp - timestamp));
        }
        if (this.lastTimestamp === timestamp) {
            this.sequence = (this.sequence + 1n) & this.sequenceMask;
            if (this.sequence === 0n) {
                timestamp = this.tilNextMillis(this.lastTimestamp);
            }
        } else {
            this.sequence = 0n;
        }
        this.lastTimestamp = timestamp;
        return ((timestamp - this.twepoch) << this.timestampLeftShift) |
            (this.dataCenterId << this.dataCenterIdShift) |
            (this.workerId << this.workerIdShift) |
            this.sequence;
    };
    Snowflake.prototype.nextIdBase62 = function () {
        var _workId = this.nextId();
        var result = '';
        result = base62Encode(_workId.toString(), result);
        return result;
    };
    return Snowflake;
}());
var idWorker = new Snowflake();
var successCount = 0;
var AliOssHelper = {
    uploadFileUrls: [],
    upload: function (eleId, dir,resultFiles) {
        AliOssHelper.uploadFileUrls = [];
        var fileList =[];
        if ($(eleId)[0]!==undefined){
            fileList = $(eleId)[0].files;
        }
        if (resultFiles!=null){
            fileList=resultFiles;
        }
        successCount = 0;
        $.ajax({
            url: '获取签名接口',
            data: { dir: dir },
            async: false,
            success: function (signature) {
                for (var i = 0; i < fileList.length; i++) {

                    var filedata = new FormData();
                    var fileNewName = idWorker.nextIdBase62() + "." + getFileType(fileList[i].name);
                    filedata.append('key', signature.Dir + fileNewName);
                    filedata.append('policy', signature.Policy);
                    filedata.append('OSSAccessKeyId', signature.AccessId);
                    filedata.append('signature', signature.Signature);
                    filedata.append('success_action_status', 200);
                    filedata.append('file', fileList[i]);
                    $.ajax({
                        url: signature.Host,
                        processData: false,
                        async: false,
                        cache: false,
                        contentType: false,
                        type: 'POST',
                        data: filedata,
                        success: function () {
                            var result = {
                                Name: fileList[successCount].name,
                                Url: signature.Host + "/" + signature.Dir + fileNewName
                            };
                            successCount = successCount + 1;
                            AliOssHelper.uploadFileUrls.push(result);
                        },
                        error: function (i) {
                            console.log(i)
                        }
                    })
                }
            }
        })
    },
    uploadAsync: function (eleId, dir,afterUploadFun) {
            AliOssHelper.uploadFileUrls = [];
            var fileList = $(eleId)[0].files;
            let successCountAsync = 0;
            $.ajax({
                url: '获取签名接口',
                data: { key: "", dir: dir },
                async: true,
                success: function (signature) {
                    for (var i = 0; i < fileList.length; i++) {
                        var filedata = new FormData();
                        var fileNewName = idWorker.nextIdBase62() + "." + getFileType(fileList[i].name);
                        filedata.append('key', signature.Dir + fileNewName);
                        filedata.append('policy', signature.Policy);
                        filedata.append('OSSAccessKeyId', signature.AccessId);
                        filedata.append('signature', signature.Signature);
                        filedata.append('success_action_status', 200);
                        filedata.append('file', fileList[i]);
                        $.ajax({
                            url: signature.Host,
                            processData: false,
                            async: true,
                            cache: false,
                            contentType: false,
                            type: 'POST',
                            data: filedata,
                            success: function () {
                                var result = {
                                    Name: fileList[successCountAsync].name,
                                    Url: signature.Host + "/" + signature.Dir + fileNewName
                                };
                                successCountAsync = successCountAsync + 1;
                                AliOssHelper.uploadFileUrls.push(result);
                                afterUploadFun(result.Url);
                            },
                            error: function (i) {
                                console.log(i)
                            }
                        })
                    }
                }
            })
        }
};
function getFileType(filePath) {
    var startIndex = filePath.lastIndexOf(".");
    if (startIndex != -1)
        return filePath.substring(startIndex + 1, filePath.length).toLowerCase();
    else return "";
}
this.window.AliOssHelper = AliOssHelper;

更改上传方法 ,调用AliOssHelper.upload方法

        const E = window.wangEditor;
        const editor= new E("#editor");
        editor.config.customUploadImg = function (resultFiles, insertImgFn) {            
               AliOssHelper.upload("", 'rebp/productdesimg/',resultFiles);
               var urls = AliOssHelper.uploadFileUrls;
               console.log(urls);
            // resultFiles 是 input 中选中的文件列表
            // insertImgFn 是获取图片 url 后，插入到编辑器的方法        
            // 上传图片，返回结果，将图片插入到编辑器中
            insertImgFn(urls[0].Url)
        }
        editor.create();