[JavaScript知识库]在Vue中使用腾讯云COS

COS Js SDK文档

<script>
	const COS = require('cos-js-sdk-v5');
	const cosf = new COS({
	  SecretId: '...',
	  SecretKey: '...',
	});
	export default {
		methods: {
			doputFunc() {
				// 这里是简单上传
				cosf.putObject({
			        Body: 'file类型的对象或流',
			        Bucket: '...', // Bucket 格式：test-1250000000
			        Region: '...', /* 存储桶所在地域，例如ap-beijing，必须字段 */
			        Key: `...`,
			        onProgress: function(progressData) {
			          // 这里可以读取进度
			          console.log(progressData)
			        },
			    }),function(err, data) {
			      console.log('function',err || data);   //上传成功返回给你的
			      // 这里的key要与上面的key保持一致
			      this.getReturnUrl(key)
			    }
			},
			docutFunc(){
				// 高级上传-超过5M(SliceSize的设置)时会自动分块上传, 否则使用简单上传
				cosf.uploadFile({
			        Bucket: '...', /* 填入您自己的存储桶，必须字段 */
			        Region: '...',  /* 存储桶所在地域，例如ap-beijing，必须字段 */
			        Key: `...`, /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
			        Body: 'file类型的对象或流',               /* 必须 */
			        SliceSize: 1024 * 1024 * 5,     /* 触发分块上传的阈值，超过5MB使用分块上传，非必须 */
			        onTaskReady: function(taskId) {                   /* 非必须 */
			           console.log('onTaskReady ---->',taskId);
			        },
			        onProgress: function (progressData) {           /* 非必须 */
			           console.log('onProgress ---->',JSON.stringify(progressData));
			        },
			        onFileFinish: function (err, data, options) {   /* 非必须 */
			        	this.getReturnUrl()
			        },
		      }, function(err, data) {
		         console.log('function ---->',err || data);
		      });
			},
			getReturnUrl(key){
				cosf.getObjectUrl({
		            Bucket: '...', /* 填入您自己的存储桶，必须字段 */
		            Region: '...',  /* 存储桶所在地域，例如ap-beijing，必须字段 */
		            Key: `...`,  /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
		            Sign: false
		        }, function (err, data) {
		        })
			}
		}
	}
</script>