参考文档:https://blog.csdn.net/qq_34170840/article/details/124520388
1、页面部分
点击查看代码
<input ref="fileRef" title="" type='file' name="file" multiple class="file-input"
@change="uploadStart($event, value)" accept="image/png, image/jpeg, .svs" />
2、js部分
点击查看代码
import COS from 'cos-js-sdk-v5'
// 后端提供
var cos = new COS({
SecretId: 'AKIDFestgFbingLchZEguulU1MWSBgxzmLfk',
SecretKey: 'tY2OYVFm7FBuQkqkSxFUYR7bt43qQnxz',
});
const uploadStart = (e) => {
let file = e.target.files && e.target.files[0];
if (!file) {
document.getElementById('msg').innerText = '未选择上传文件';
return;
}
console.log(file, cos);
handleFileInUploading(file);
/* 直接调用 cos sdk 的方法 */
}
const handleFileInUploading = (file) => {
cos.uploadFile({
// 后端提供
Bucket: 'prd-bdgj-1253531169', /* 填写自己的 bucket,必须字段 */
Region: 'ap-shanghai-fsi', /* 存储桶所在地域,必须字段 */
Key: file.name, /* 存储在桶里的对象键(例如:1.jpg,a/b/test.txt,图片.jpg)支持中文,必须字段 */
Body: file, // 上传文件对象
// SliceSize: 1024 * 1024 * 5, /* 触发分块上传的阈值,超过5MB使用分块上传,小于5MB使用简单上传。可自行设置,非必须 */
onProgress: function (progressData) {
console.log(JSON.stringify(progressData));
}
}, function (err, data) {
if (err) {
console.log('上传失败', err);
} else {
console.log('上传成功');
}
});