Add Image Upload in Configuration

acl.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
    <acl>
        <resources>
            <resource id="Magento_Backend::admin">
                <resource id="Magento_Backend::stores">
                    <resource id="Magento_Backend::stores_settings">
                        <resource id="Magento_Config::config">
                            <resource id="MageVision_Blog4::blog4_configuration" title="MageVision Blog Post 4 Section" />
                        </resource>
                    </resource>
                </resource>
            </resource>
        </resources>
    </acl>
</config>

Image.php

<?php
namespace MageVision\Blog4\Model\Config\Backend;

class Image extends \Magento\Config\Model\Config\Backend\Image
{
    /**
     * The tail part of directory path for uploading
     */
    const UPLOAD_DIR = 'blog/post4';

    /**
     * Upload max file size in kilobytes
     *
     * @var int
     */
    protected $_maxFileSize = 2048;
    
   /**
     * Return path to directory for upload file
     *
     * @return string
     * @throw \Magento\Framework\Exception\LocalizedException
     */
    protected function _getUploadDir()
    {
        return $this->_mediaDirectory->getAbsolutePath($this->_appendScopeInfo(self::UPLOAD_DIR));
    }

    /**
     * Makes a decision about whether to add info about the scope.
     *
     * @return boolean
     */
    protected function _addWhetherScopeInfo()
    {
        return true;
    }

    /**
     * Getter for allowed extensions of uploaded files.
     *
     * @return string[]
     */
    protected function _getAllowedExtensions()
    {
        return ['jpg', 'jpeg', 'gif', 'png', 'svg'];
    }

    /**
     * @return string|null
     */
    protected function getTmpFileName()
    {
        $tmpName = null;
        if (isset($_FILES['groups'])) {
            $tmpName = $_FILES['groups']['tmp_name'][$this->getGroupId()]['fields'][$this->getField()]['value'];
        } else {
            $tmpName = is_array($this->getValue()) ? $this->getValue()['tmp_name'] : null;
        }
        return $tmpName;
    }

    /**
     * Save uploaded file before saving config value
     *
     * Save changes and delete file if "delete" option passed
     *
     * @return $this
     */
    public function beforeSave()
    {
        $value = $this->getValue();
        $deleteFlag = is_array($value) && !empty($value['delete']);
        $fileTmpName = $this->getTmpFileName();

        if ($this->getOldValue() && ($fileTmpName || $deleteFlag)) {
            $this->_mediaDirectory->delete(self::UPLOAD_DIR . '/' . $this->getOldValue());
        }
        return parent::beforeSave();
    }
}

system.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="magevision" translate="label" sortOrder="1000">
            <label>MageVision Blog Posts</label>
        </tab>
        <section id="blog" translate="label" type="text" sortOrder="1009" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Post 4</label>
            <tab>magevision</tab>
            <resource>MageVision_Blog4::blog4_configuration</resource>
            <group id="post4" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>General</label>
                <field id="image_upload" translate="label" type="image" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Image Upload</label>
                    <!-- Backend model which saves uploaded files on a defined directory path -->
                    <backend_model>MageVision\Blog4\Model\Config\Backend\Image</backend_model>
                    <base_url type="media" scope_info="1">blog/post4</base_url>
                    <!-- Comment about allowed extensions of uploaded files which are defined in the backend model -->
                    <comment><![CDATA[Allowed file types: jpg, jpeg, gif, png, svg]]></comment>
                </field>
            </group>
        </section>
    </system>
</config>

system1.xml

 <field id="image_upload" translate="label" type="image" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
    <label>Image Upload</label>
    <!-- Backend model which saves uploaded files on a defined directory path -->
    <backend_model>MageVision\Blog4\Model\Config\Backend\Image</backend_model>
    <upload_dir config="system/filesystem/media" scope_info="1">blog/post4</upload_dir>
    <base_url type="media" scope_info="1">blog/post4</base_url>
    <!-- Comment about allowed extensions of uploaded files which are defined in the backend model -->
    <comment><![CDATA[Allowed file types: jpg, jpeg, gif, png, svg]]></comment>
</field>

system2.xml

 <field id="image_upload" translate="label" type="image" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
    <label>Image Upload</label>
    <!-- Backend model which saves uploaded files on a defined directory path -->
    <backend_model>Magento\Config\Model\Config\Backend\Image</backend_model>
    <base_url type="media" scope_info="1">blog/post4</base_url>
    <!-- Comment about allowed extensions of uploaded files which are defined in the backend model -->
    <comment><![CDATA[Allowed file types: jpg, jpeg, gif, png, svg]]></comment>
</field>