boheimg-wordpress-plugin/upload/bohe-img.php

<?php
add_action('media_buttons', 'add_bohe_upload_button');
function add_bohe_upload_button() {
    if(!empty(wp_get_current_user()->roles) && in_array('administrator', wp_get_current_user()->roles)){
        $getdataDoMain = get_option('domain');
        $getdataTokens = get_option('tokens');
        $getdataProtocolType = get_option('protocol_type');
        $getdataMode = get_option('mode');
        $getdataUploadPath = get_option('uploadPath');
        $getdataWatermark = get_option('watermark');
        $getdataImageCompress = get_option('image_compress');
        $getdataImageCompressLevel = get_option('image_compress_level');
    }
    else return 0;
?>
<link href="<?php echo plugin_dir_url(__FILE__ ); ?>assets/style.css" type="text/css" rel="stylesheet" />
<a href="javascript:;" class="bohe-upload"><input type="file" id="input-bohe-upload" multiple />上传图片</a>
<span id="tip">上传图片过程中请耐心等待！请勿刷新页面，如果等待时间过长没有上传成功可以刷新页面重试或检查插件设置</span>
<script src="//lib.baomitu.com/axios/0.27.2/axios.min.js"></script>
<script>
    const bohe_upload = document.getElementById('input-bohe-upload');
    bohe_upload.addEventListener("change", () => { //监听上传按钮
        const getdataDoMain = "<?php echo get_option('domain'); ?>";
        const getdataTokens = "<?php echo get_option('tokens'); ?>";
        const getdataProtocolType = "<?php echo get_option('protocol_type'); ?>"; //协议类型
        const getdataMode = "<?php echo get_option('mode'); ?>";
        const getdataUploadPath = "<?php echo get_option('uploadPath'); ?>";
        const getdataWatermark = "<?php echo get_option('watermark'); ?>";
        const getdataImageCompress = "<?php echo get_option('image_compress'); ?>";
        const getdataImageCompressLevel = "<?php echo get_option('image_compress_level'); ?>";
        
        const files = bohe_upload.files;
        for(let i = 0; i < files.length; i++) {
            const file = files[i];
            const formData = new FormData();
            //输出调试信息
            formData.append("api_token", getdataTokens);
            formData.append('uploadedFile', file);
            // 只在协议类型不为空时添加参数
            if(getdataProtocolType !== ''){
                formData.append('protocol_type', '<?php echo get_option('protocol_type'); ?>');
            }
            if(getdataMode !== ''){
                formData.append('mode', getdataMode);
            }
            if(getdataImageCompress !== ''){
                formData.append('image_compress', '1');
                formData.append('image_compress_level', '<?php echo get_option('image_compress_level'); ?>');
            }
            formData.append('uploadPath', '<?php echo get_option('uploadPath'); ?>');

            // 添加水印和压缩参数判断
            if(getdataWatermark === '1'){
                formData.append('watermark', '1');
            }
            document.getElementById('input-bohe-upload').disabled = true;
            document.getElementById('tip').innerHTML = '正在上传中...';
            axios.defaults.crossDomain = true;
            axios({
                method:'post',
                url: '<?php echo get_option('domain'); ?>/api/upload/',
                data:formData
            }).then(response => {
                const data = response.data;
                if (data.status) {
                    const url = data.url;
                    const name = data.originFileName;
                    wp.media.editor.insert('<a href="'+ url +'"><img src="'+ url +'" alt="'+ name +'" /></a>');
                    document.getElementById('input-bohe-upload').disabled = false;
                    document.getElementById('tip').innerHTML = '上传图片过程中请耐心等待！请勿刷新页面，如果等待时间过长没有上传成功可以刷新页面重试或检查插件设置';
                }
            }).catch(error => {
                console.log(error);
                document.getElementById('input-bohe-upload').disabled = false;
                document.getElementById('tip').innerHTML = '上传图片过程中请耐心等待！请勿刷新页面，若等待时间过长可以尝试刷新页面重试或检查插件设置';
            });
        }
    });
</script>
<?php }
add_action('add_meta_boxes', 'add_bohe_upload_box');
function add_bohe_upload_box() {
    if(!empty(wp_get_current_user()->roles) && in_array('administrator', wp_get_current_user()->roles)){
        add_meta_box('bohe_upload_box_tmp', '薄荷图床(BohePro)上传', 'bohe_upload_box', 'post', 'side', 'high');
    }
    else return 0;
}
function bohe_upload_box() {?>
    <link href="<?php echo plugin_dir_url(__FILE__ ); ?>assets/style.css" type="text/css" rel="stylesheet" />
    <div id="bohe-upload-box">点击此区域上传图片</div>
    <input type="file" multiple id="bohe-upload-box-input" />
    <div id="result"></div>
    <script src="//lib.baomitu.com/axios/0.27.2/axios.min.js"></script>
    <script>
        const bohe_upload_input = document.getElementById('bohe-upload-box-input');
        bohe_upload_input.addEventListener("change", () => {
            const getdataDoMain = "<?php echo get_option('domain'); ?>";
            const getdataTokens = "<?php echo get_option('tokens'); ?>";
            const getdataProtocolType = "<?php echo get_option('protocol_type'); ?>"; //协议类型
            const getdataMode = "<?php echo get_option('mode'); ?>";
            const getdataUploadPath = "<?php echo get_option('uploadPath'); ?>";
            const getdataWatermark = "<?php echo get_option('watermark'); ?>";
            const getdataImageCompress = "<?php echo get_option('image_compress'); ?>";
            const getdataImageCompressLevel = "<?php echo get_option('image_compress_level'); ?>";
            const files = bohe_upload_input.files;
            for(let i = 0; i < files.length; i++) {
                const file = files[i];
                const formData = new FormData();

                formData.append("api_token", getdataTokens);
                formData.append('uploadedFile', file);
                // 只在协议类型不为空时添加参数
                if(getdataProtocolType !== ''){
                    formData.append('protocol_type', '<?php echo get_option('protocol_type'); ?>');
                }
                if(getdataMode !== ''){
                    formData.append('mode', getdataMode);
                }
                if(getdataImageCompress !== ''){
                    formData.append('image_compress', '1');
                    formData.append('image_compress_level', '<?php echo get_option('image_compress_level'); ?>');
                }
                formData.append('uploadPath', '<?php echo get_option('uploadPath'); ?>');
                // 添加水印和压缩参数判断
                if(getdataWatermark === '1'){
                    formData.append('watermark', '1');
                }

                console.log(formData);
                document.getElementById('bohe-upload-box-input').disabled = true;
                document.getElementById('bohe-upload-box').innerHTML = '正在上传中...';
                axios({
                    method:'post',
                    url: '<?php echo get_option('domain'); ?>/api/upload/',
                    data:formData
                }).then(response => {
                    const data = response.data;
                    if (data.status) {
                        const url = data.url;
                        const name = data.originFileName;
                        const input = document.createElement('input');
                        input.type = 'text';
                        input.value = url;
                        document.getElementById('result').appendChild(input);
                        input.addEventListener('click', function() {
                            input.select();
                            document.execCommand('copy');
                        });
                        document.getElementById('bohe-upload-box-input').disabled = false;
                        document.getElementById('bohe-upload-box').innerHTML = '点击此区域上传图片';
                    }
                }).catch(error => {
                    console.log(error);
                    document.getElementById('bohe-upload-box-input').disabled = false;
                    document.getElementById('bohe-upload-box').innerHTML = '点击此区域上传图片';
                });
            }
        });
    </script>
<?php } ?>