普通button触发文件选择实例页面

HTML代码：

<button id="button" type="primary" is="ui-button">选择图片</button>
<p id="output"></p>
                

JS代码：

var eleButton = document.getElementById('button');
if (window.showOpenFilePicker && eleButton) {
    eleButton.addEventListener('click', async function () {
        // 打开文件
        const arrFileHandle = await window.showOpenFilePicker({
              types: [{
                  description: 'Images',
                  accept: {
                    'image/*': ['.png', '.gif', '.jpeg', '.jpg', '.webp']
                  }
            }],
              multiple: true
        });
        
        // 遍历选择的文件
        for (const fileHandle of arrFileHandle) {
            // 获取文件内容
            const fileData = await fileHandle.getFile();
            // 读文件数据
            const buffer = await fileData.arrayBuffer();
            // 转成Blod url地址
            let src = URL.createObjectURL(new Blob([buffer]));
            // 在页面中显示
            output.insertAdjacentHTML('beforeend', `<img src="${src}">`);
        }
    });
}