5+app 纯js 上传本地文件至腾讯云
时间: 2024-01-15 18:05:57 浏览: 36
要在网页上实现上传本地文件至腾讯云,需要使用腾讯云的对象存储服务 COS,并且需要用到 COS 的 JavaScript SDK。以下是一个基本的上传示例:
1. 在腾讯云 COS 控制台创建存储桶,并获取存储桶的名称和访问密钥 ID 和密钥。
2. 在 HTML 中添加一个文件上传的表单:
```html
<form>
<input type="file" id="file-input">
<button type="submit" id="upload-btn">上传</button>
</form>
```
3. 在 JavaScript 中,引入 COS SDK 并初始化:
```javascript
const COS = require('cos-js-sdk-v5');
const cos = new COS({
SecretId: 'your-secret-id',
SecretKey: 'your-secret-key',
});
```
4. 监听表单提交事件,获取上传的文件并调用 COS SDK 的 `putObject` 方法上传:
```javascript
const form = document.querySelector('form');
const fileInput = document.querySelector('#file-input');
const uploadBtn = document.querySelector('#upload-btn');
form.addEventListener('submit', (e) => {
e.preventDefault();
const file = fileInput.files[0];
const key = file.name;
cos.putObject({
Bucket: 'your-bucket-name',
Region: 'your-bucket-region',
Key: key,
Body: file,
}, (err, data) => {
if (err) {
console.error(err);
} else {
console.log(data);
}
});
});
```
其中 `Bucket` 是存储桶名称,`Region` 是存储桶所在的地区,`Key` 是文件名,`Body` 是文件对象。
需要注意的是,由于腾讯云 COS 支持跨域上传,因此可以直接在前端使用 JavaScript 上传文件。不过这种方式需要将密钥直接暴露在前端代码中,存在安全风险,因此建议在服务端实现上传,并通过 API 提供给前端调用。