Using Alibaba Cloud OSS for File Uploads: Setup, Code Samples, and Best Practices
This article explains why direct file storage on application servers is not scalable, introduces Alibaba Cloud OSS as an object storage solution, walks through bucket creation, access key management, Node.js upload code, temporary credentials for browser uploads, CDN integration, and security considerations, providing a complete end‑to‑end upload workflow.
File upload is a common requirement; storing files directly on an application server is not scalable, so Object Storage Service (OSS) is used.
OSS stores objects as an ID, file content, and metadata; a bucket holds many files, and tags simulate directory structures because true hierarchical folders do not exist.
Alibaba Cloud offers three storage types—OSS (object storage), file storage, and block storage—where OSS provides unlimited capacity and is the default choice for most scenarios.
After purchasing a 40 GB OSS package, a bucket is created in Beijing, public read permission is set, and CDN is enabled to serve files from the nearest edge node.
Node.js example using the ali-oss package to upload a file:
const OSS = require('ali-oss');
const client = new OSS({
region: 'oss-cn-beijing',
bucket: 'guang-333',
accessKeyId: '<yourAccessKeyId>',
accessKeySecret: '<yourAccessKeySecret>'
});
await client.put('cat.png', './mao.png');
console.log('Upload result:', result);AccessKeyId and AccessKeySecret are used for authentication; for better security, a RAM sub‑user is created and granted only the necessary OSS permissions.
Temporary credentials can be generated on the server (e.g., using client.calculatePostSignature) and returned to the client, allowing direct browser uploads without exposing long‑term keys.
Example HTML page with a file input and JavaScript that obtains temporary OSS info and posts the file using Axios:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OSS Direct Upload</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<input id="fileInput" type="file" />
<script>
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');
}
};
</script>
</body>
</html>Enable CORS on the OSS bucket to allow cross‑origin uploads; after configuration, the browser can upload files without errors.
The recommended workflow is: the backend creates a short‑lived temporary AccessKey for the client, the client uploads directly to OSS, CDN delivers the content globally, and the server only receives the final file URL, minimizing server load and exposure of permanent credentials.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
IT Services Circle
Delivering cutting-edge internet insights and practical learning resources. We're a passionate and principled IT media platform.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.