参考

Cocos Creator 国旗头像生成器，源码奉上！
creator 发布web时，打开本地图片
说明：参考链接中的方法在CocosCreator3.x中无法直接使用，需做如下修改。

实现

在index文件中body内添加如下标签

<p hidden="hidden"><input id="OpenImageFile" type="file" name="image" accept="image/*"></p>

2处。

1. 工程预览
   文件：index.ejs
   目录：Cocos\CocosDashboard\resources\Editor\Creator\3.6.0\resources\app.asar.unpacked\builtin\preview\static\views

2. 本工程目录下的build-templates\web-mobile下的index.html

通过OpenImgFile.openFile将打开的图片转为SpriteFrame

OpenImgFile.ts

import { input, SpriteFrame } from "cc";

export default class OpenImgFile
{ 
    private static readonly tagName = 'OpenImageFile';
    private static canRepeatUpload()
    {
        const inputImgFile = document.getElementById(OpenImgFile.tagName);
        if (!inputImgFile)
        { 
            console.info('上传失败！！！');
            return;
        }

        if (inputImgFile.outerHTML)
        {
            inputImgFile.outerHTML = inputImgFile.outerHTML;
        }

        if (inputImgFile.nodeValue)
        { 
            inputImgFile.nodeValue = null;
        }
    }

    public static openFile(setSpriteFrame: (spriteFrame: SpriteFrame) => void)
    { 
        const inputImgFile = document.getElementById(OpenImgFile.tagName);
        if (inputImgFile)
        {
            console.info('openFile成功！！！！');

            inputImgFile.onchange = (e) =>
            { 

                const files = (<HTMLInputElement>e.target).files;
                const upType = files[0].type;
                if (upType == 'image/gif' || upType.indexOf('image') < 0)
                { 
                    console.info('只能上传图片！！！');
                    OpenImgFile.canRepeatUpload();
                    return;
                }
                try
                {
                    if (window.FileReader)
                    { 
                        const curFile = files[0];
                        const fileReader = new FileReader();
                        fileReader.readAsDataURL(curFile);
                        if (curFile.size > 1024 * 1024 * 5)
                        { 
                            console.info('文件太大，请重选！！！');
                            OpenImgFile.canRepeatUpload();
                            return;
                        }
                        fileReader.onload = (ee) =>
                        { 
                            if (fileReader.readyState == fileReader.DONE)
                            {
                                OpenImgFile.canRepeatUpload();
                                const strImg = <string>ee.target.result;
                                if (setSpriteFrame)
                                { 
                                    const img = new Image();
                                    img.src = strImg;

                                    img.onload = () => {
                                        const spriteFrame = SpriteFrame.createWithImage(img);
                                        setSpriteFrame(spriteFrame);
                                    }
                                }
                            }
                        }

                    }
                    else
                    { 
                        console.info('不支持该浏览器！！！');
                    }
                }
                catch (err)
                { 
                    console.info('读取文件失败，再试一次！');
                    OpenImgFile.canRepeatUpload();
                    return;
                }
            }
        }
        else
        { 
            console.info('openFile失败！！！！');
        }

        if (inputImgFile)
        {
            inputImgFile.click();
        }
    }
}

测试：
点击按钮触发下面代码中的openFile方法，选择好图片后，图片会被显示在Sprite上。
Test.ts

import { _decorator, Component, Node, randomRangeInt, spriteAssembler, Sprite, SpriteFrame, Texture2D, ImageAsset } from 'cc';
import OpenImgFile from '../Scripts/TestImg/OpenImgFile';
const { ccclass, property } = _decorator;

@ccclass('Test')
export class Test extends Component
{
    @property({ type: Sprite, visible: true })
    private _sprite: Sprite;

    private setSpriteFrame(spriteFrame: SpriteFrame):void
    { 
        this._sprite.spriteFrame = spriteFrame;
    }
    // 点击按钮触发
    private openFile(): void
    {
        OpenImgFile.openFile((spriteFrame: SpriteFrame) => this.setSpriteFrame(spriteFrame));
    }
}