js直传图片到oss

当然可以使用JS直传的方式来处理页面上多个上传按钮的情况。每个上传按钮对应不同的文件上传逻辑，您可以通过为每个上传按钮绑定独立的事件处理器来实现这一需求。以下是基于您提及的Java环境和已有的JS直传实践，针对多上传按钮场景的一个解决方案概述：

解决方案

1. 修改HTML结构

为每个上传按钮分配唯一的ID，并且为对应的文件输入元素（如<input type="file">）也设置相应的ID，以便于在JavaScript中区分和操作。

<!-- 示例：两个上传按钮及对应的文件输入框 -->
<button id="uploadButton1">上传图片1</button>
<input type="file" id="fileInput1" style="display: none;">
<button id="uploadButton2">上传图片2</button>
<input type="file" id="fileInput2" style="display: none;">

2. 编写JavaScript代码

为每个上传按钮编写独立的事件监听器，当按钮被点击时，触发相应文件输入框的选择文件对话框。一旦用户选择了文件，利用之前提到的签名URL进行直传。

document.getElementById('uploadButton1').addEventListener('click', function() {
    document.getElementById('fileInput1').click();
});

document.getElementById('fileInput1').addEventListener('change', async function(event) {
    const file = event.target.files[0];
    if (file) {
        // 这里调用获取签名URL的方法，示例中未直接给出此方法，请参考知识库资料自行实现或调用后端提供的接口
        const signedUrl = await getSignedUrlForUpload('yourBucketName', 'path/to/image1');
        uploadFile(file, signedUrl);
    }
});

// 对第二个上传按钮重复上述过程
document.getElementById('uploadButton2').addEventListener('click', function() {
    document.getElementById('fileInput2').click();
});

document.getElementById('fileInput2').addEventListener('change', async function(event) {
    const file = event.target.files[0];
    if (file) {
        const signedUrl = await getSignedUrlForUpload('yourBucketName', 'path/to/image2');
        uploadFile(file, signedUrl);
    }
});

// 文件上传函数
async function uploadFile(file, signedUrl) {
    const xhr = new XMLHttpRequest();
    xhr.open('PUT', signedUrl, true);
    xhr.setRequestHeader('Content-Type', file.type);
    xhr.send(file);
}

3. 获取签名URL

• 后端服务提供: 您需要在Java后端实现一个接口，该接口接收文件名或路径作为参数，生成签名URL并返回给前端。这一步骤可参考知识库中的示例代码。
• 或者前端动态请求: 如果您的应用允许，也可以考虑在前端通过Ajax请求直接从OSS SDK获取签名URL，但请注意安全性和权限控制。

注意事项

• 安全性：确保生成签名URL时设置了合理的过期时间，并仅对可信的前端应用暴露此功能，避免滥用。
• 性能与用户体验：合理设计上传进度显示和错误处理机制，提升用户体验。
• 资源命名策略：为不同上传按钮选择的文件指定不同的存储路径或名称，以避免覆盖问题。

通过以上步骤，您可以在一个页面上使用多个上传按钮，各自负责上传不同的图片至阿里云OSS，充分利用了JS直传的便利性。