前端使用COS上传文件

实际项目中会利用COS去存储项目中上传的文件等

腾讯云对象存储（COS）除了提供多种API接口，还提供了丰富的SDK供开发者使用，作为前端，这里我参考的是JavaScript SDK文档

安装SDK

npm install cos-js-sdk-v5

使用

使用首先必须要引入SDK完成初始化cos实例，才可以调用SDK方法，例如cos.uploadFile、cos.getObject等

参考官方文档可知，SDK内部需要通过密钥生成签名，有单次临时密钥、临时密钥回调、永久密钥等，根据具体情况进行使用，这里我使用的是临时密钥回调

//在utils下新建cos.js文件用来存放相关逻辑代码

import COS from 'cos-js-sdk-v5';
let cos=null
const getCos=()=>{
//由于可能会有多文件/多次文件上传，因此这里可以加一个判断，即cos如果已经存在就不用再重新生成
	if(cos) return cos
	cos = new COS({
    	getAuthorization: async function (options, callback) {
      		const data = await fetchSts('xxxx'); // 需自行实现获取临时密钥逻辑
      		callback({
        		TmpSecretId: data.credentials.tmpSecretId,
        		TmpSecretKey: data.credentials.tmpSecretKey,
        		SecurityToken: data.credentials.sessionToken,
       		 // 建议返回服务器时间作为签名的开始时间，避免客户端本地时间偏差过大导致签名错误
        		StartTime: data.startTime, // 时间戳，单位秒，如：1580000000
        		ExpiredTime: data.expiredTime, // 时间戳，单位秒，如：1580000000
        		ScopeLimit: true, // 细粒度控制权限需要设为 true，会限制密钥只在相同请求时重复使用
      		});
    	}
	});
	return cos
}

//使用上传文件
export const uploadEleFile =  ( eleFile )=> {
    const file=eleFile.raw
    let filename=file.name
    return new Promise( (resolve, reject) => {
        ...//根据自身项目需要进行的一些自定义操作
        getCos().uploadFile({
                Bucket: 'examplebucket-1250000000', /* 填写自己的 bucket，必须字段 */
      			Region: 'COS_REGION',     /* 存储桶所在地域，必须字段 */
      			Key: '1.jpg',              /* 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */
      			Body: file, // 上传文件对象
      			SliceSize: 1024 * 1024 * 5, 
                // 上传任务创建时的回调，返回一个taskId,唯一标识上传任务，可用于上传任务的取消/停止/重新开始
                onTaskReady: (taskId) => {
                    eleFile.status = 'uploading'
                },
                //上传文件的进度回调函数
                onProgress: (progressData) => {           /* 非必须 */
                    eleFile.percentage = progressData.percent * 100
                },
                //文件完成或错误回调
                onFileFinish: async (err, data, options) => {
                	//上传失败
                    if (err) {
                        eleFile.status = 'fail'
                        reject(err)
                    } else {
                    	//上传成功
                        eleFile.status = 'success'
                        //上传成功后的自定义操作，有时上传后的文件我们需要获取来展示
                        let res = await await fetchSts('xxxx')//需自行实现获取
                        if (res) {
                            resolve(res)
                        }
                    }
                },
                // 支持自定义headers 非必须
                Headers: {
                },
            },
        )
    })
}

调用

在外部的el-upload组件中就可以使用

<script>
export default {
	data(){
		return {
			fileList:[]
		}
	},
	methods:{
		async sure(){
			for (const file of this.fileList) {
        		if (file.status !== 'ready') {
          			continue
        		}
        		let res = await uploadEleFile(file)
        		if (res) {
          			file.url = res.url
        		}
      		}
		}
	}
}
</script>