TinyMCE的上传文件的功能

记录一下TinyMCE的上传文件的功能：

用Base64上传图片：

if (meta.filetype == 'image') {
        var input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/*');

        /*
        Note: In modern browsers input[type="file"] is functional without
        even adding it to the DOM, but that might not be the case in some older
        or quirky browsers like IE, so you might want to add it to the DOM
        just in case, and visually hide it. And do not forget do remove it
        once you do not need it anymore.
        */

        input.onchange = function () {
        var file = this.files[0];

        var reader = new FileReader();
        reader.onload = function () {
            /*
            Note: Now we need to register the blob in TinyMCEs image blob
            registry. In the next release this part hopefully won't be
            necessary, as we are looking to handle it internally.
            */
            var id = 'blobid' + (new Date()).getTime();
            var blobCache = tinymce.activeEditor.editorUpload.blobCache;
            var base64 = reader.result.split(',')[1];
            var blobInfo = blobCache.create(id, file, base64);
            blobCache.add(blobInfo);

            /* call the callback and populate the Title field with the file name */
            cb(blobInfo.blobUri(), { title: file.name });
        };
        reader.readAsDataURL(file);
        };

        input.click();
    }

用XMLHttp上传视频：

if (meta.filetype == 'media') {
        //创建一个隐藏的type=file的文件选择input
        let input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.onchange = function () {
        let file = this.files[0];//只选取第一个文件。如果要选取全部，后面注意做修改
        let xhr, formData;
        xhr = new XMLHttpRequest();
        xhr.open('POST', '/api/district/video/upload');
        xhr.withCredentials = true;
        xhr.upload.onprogress = function (e) {
            // 进度(e.loaded / e.total * 100)
            debugger
        };
        xhr.onerror = function () {
            //根据自己的需要添加代码
            console.log(xhr.status);
            return;
        };
        xhr.onload = function () {
            let json;
            if (xhr.status < 200 || xhr.status >= 300) {
            console.log('HTTP 错误: ' + xhr.status);
            return;
            }
            json = JSON.parse(xhr.responseText);
            //假设接口返回JSON数据为{status: 0, msg: "上传成功", data: {location: "/localImgs/1546434503854.mp4"}}
            if (json.status == 0) {
            //接口返回的文件保存地址
            let mediaLocation = json.data.location;
            //cb()回调函数，将mediaLocation显示在弹框输入框中
            cb(mediaLocation, { title: file.name });
            } else {
            console.log(json.msg);
            return;
            }

        };
        formData = new FormData();
        //假设接口接收参数为file,值为选中的文件
        formData.append('file', file);
        //正式使用将下面被注释的内容恢复
        xhr.send(formData);
        }
        //触发点击
        input.click();
    }

使用swagger+openapi的接口：

    if (meta.filetype == 'image') {
        //创建一个隐藏的type=file的文件选择input
        let input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.onchange = function () {
            let file = this.files[0];//只选取第一个文件。如果要选取全部，后面注意做修改
            // console.log('file', file)
            dynamicController.uploadPicFileUsingPOST({ name: file.name }, { file: file }).then(res => {
                // console.log('res:', res)
                cb(res.data?.path, { title: file.name })
            })
        }
        //触发点击
        input.click();
    }else if(meta.filetype == 'media'){
        let input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.onchange = function () {
            let file = this.files[0];//只选取第一个文件。如果要选取全部，后面注意做修改
            // console.log('file', file)
            dynamicController.uploadVideoFileUsingPOST({ name: file.name }, { file: file }).then(res => {
                // console.log('res:', res)
                cb(res.data?.path, { title: file.name })
            })
        }
        //触发点击
        input.click();
    }