Using Alibaba Cloud OSS for File Uploads: Setup, Code Samples, and Best Practices

const fileInput = document.getElementById('fileInput'); async function getOSSInfo() { // In practice, fetch from your backend return { OSSAccessKeyId: 'LTAI5tDemEBPwQkTx65jZCdy', Signature: 'NfXgq/qLIR2/v87j/XC9sjrASOA=', policy: 'eyJleHBpcmF0aW9uIjoi...", host: 'http://guang-333.oss-cn-beijing.aliyuncs.com' }; } fileInput.onchange = async () => { const file = fileInput.files[0]; const ossInfo = await getOSSInfo(); const formData = new FormData(); formData.append('key', file.name); formData.append('OSSAccessKeyId', ossInfo.OSSAccessKeyId); formData.append('policy', ossInfo.policy); formData.append('signature', ossInfo.Signature); formData.append('file', file); const res = await axios.post(ossInfo.host, formData); if (res.status === 200) { const img = document.createElement('img'); img.src = `${ossInfo.host}/${file.name}`; document.body.appendChild(img); alert('Upload successful'); } };