JavaScript SDK 上传七牛云文件的方法
时间: 2023-10-23 14:12:50 浏览: 210
qiniuyun.zip_has6tt_springlml_write4yf_七牛云php使用
使用七牛云的 JavaScript SDK,上传文件的方法如下:
1. 引入 SDK:
```html
<script src="https://cdn.staticfile.org/plupload/2.3.6/plupload.full.min.js"></script>
<script src="https://cdn.staticfile.org/qiniu-js/1.0.24-beta/qiniu.min.js"></script>
```
2. 配置七牛云参数:
```javascript
var config = {
useCdnDomain: true, // 是否使用 CDN 加速域名
region: qiniu.region.z2, // 上传域名区域
uptokenURL: '/api/uptoken', // 获取上传凭证的后端接口
domain: 'http://yourdomain.com/', // 域名,即访问上传的文件时使用的地址
container: 'upload-container', // 上传控件的容器 ID
maxFileSize: 10 * 1024 * 1024, // 最大文件大小,单位为字节
chunkSize: 4 * 1024 * 1024, // 分块上传时每块的大小,单位为字节
autoStart: true // 是否自动开始上传
};
```
3. 创建上传实例:
```javascript
var uploader = Qiniu.uploader({
runtimes: 'html5,flash,html4',
browse_button: 'select-file', // 选择文件按钮的 ID
...config, // 将七牛云参数传入
init: {
// 上传状态改变时的回调函数
'StateChanged': function(up) {
if (up.state === plupload.STARTED) {
console.log('上传中');
} else if (up.state === plupload.STOPPED) {
console.log('上传停止');
}
},
// 文件添加到上传队列时的回调函数
'FilesAdded': function(up, files) {
// 遍历文件列表,处理每个文件
plupload.each(files, function(file) {
console.log('文件名:' + file.name + ', 文件大小:' + plupload.formatSize(file.size));
});
},
// 上传成功时的回调函数
'FileUploaded': function(up, file, info) {
var res = JSON.parse(info.response); // 解析上传成功后返回的数据
console.log('文件上传成功,访问地址为:' + config.domain + res.key);
},
// 上传出错时的回调函数
'Error': function(up, err, errTip) {
console.log('上传出错:' + errTip);
}
}
});
```
4. 开始上传:
```javascript
uploader.start();
```
以上就是使用七牛云的 JavaScript SDK 上传文件的方法。需要注意的是,上传文件需要先获取上传凭证,可以通过调用七牛云的 API 接口来获取,也可以使用 SDK 中提供的 `uptokenURL` 参数来指定后端接口获取。
阅读全文