騰訊雲存儲桶對象存儲COS，Web直傳代碼，使用臨時授權驗證，vue elementui的upload組件直接調用上傳至cos

在main.js中添加如下代碼，前提是引入cos的sdk。

//--上傳到騰訊cos，這段代碼寫在main.js中
var Bucket = 'test-xxxxxxx';
var Region = 'ap-shanghai'; /* 存儲桶所在地域，必須字段 */
let CosAuth = null;
let getCosAuth = (callback) => {
	$.ajax({
		type: "POST",
		contentType: "application/json;charset=UTF-8",
		headers: {
			'Content-Type': 'application/json;charset=utf8',
			'Authorization':  localStorage.getItem("token")
		},
		url: rootUrl + "/api/admin/get-cos-key",
		//後端接口返回臨時祕鑰信息
		data: null,
		//請求成功，這段是cos代碼
		success: function(data) {
			var credentials = data.data && data.data.credentials;
			if (!data || !credentials) return console.error('credentials invalid');
			CosAuth = ({
				TmpSecretId: credentials.tmpSecretId,
				TmpSecretKey: credentials.tmpSecretKey,
				XCosSecurityToken: credentials.sessionToken,
				// 建議返回服務器時間作爲簽名的開始時間，避免用戶瀏覽器本地時間偏差過大導致簽名錯誤
				StartTime: data.data.start_time, // 時間戳，單位秒，如：1580000000
				ExpiredTime: data.data.expiredTime, // 時間戳，單位秒，如：1580000900
			});
			
			callback()

		},
		//請求失敗，包含具體的錯誤信息
		error: function(e) {
			console.log(e.status);
			console.log(e.responseText);
		}
	});
}


Vue.prototype.uploadOss = fileObj => {
    //重點，getAuthorization內部封裝函數
    let getCosAuth2 = (options, callback) => {
	    callback(CosAuth)
    }    
	getCosAuth(() => {
		var cos = new COS({
			getAuthorization: getCosAuth2//重點調用函數
		});
		let outurl ="我的域名";
		
		var myDate = new Date();
		var ossPath = 'files/' + myDate.getFullYear() + "-" + (myDate.getMonth() + 1);
		// 獲取文件後綴
		var pathArr = fileObj.file.name.split('.')
		//  隨機生成文件名稱
		var fileRandName = Date.now() + "" + parseInt(Math.random() * 1000)
		var fileName = fileRandName + '.' + pathArr[pathArr.length - 1]
		// 要提交的key
		var fileKey = ossPath + "/" + fileName;
		let formdata = {
			Bucket: Bucket, 
			Region: Region,
			Key: fileKey,
			Body: fileObj.file,
			onTaskReady: function(tid) {
				
			},
			onHashProgress: function(progressData) {
				
			},
			onProgress: function(progressData) {
				
				if(fileObj.onProgress){
					fileObj.onProgress(progressData)
				}
				
			},
		}
		cos.putObject(formdata, function(err, data) {
			if (!err&&fileObj.onSuccess) {
				fileName = fileName.toLocaleLowerCase();
				//計算圖片高度
				if (fileName.indexOf(".jpg") > 0 || fileName.indexOf(".jpeg") > 0 || fileName.indexOf(".png") > 0 || fileName
					.indexOf(
						".gif") > 0 || fileName.indexOf(".bmp") > 0) {
			
					var reader = new FileReader();
					reader.readAsDataURL(fileObj.file);
					reader.onload = function(theFile) {
						var image = new Image();
						image.src = theFile.target.result;
						image.onload = function() {
							fileObj.onSuccess({
								src: outurl + "/" + fileKey + "?s=" + this.width + "_" + this.height,
								fileName: fileObj.file.name
							})
			
						};
					};
				} else {
					fileObj.onSuccess({
						src: outurl + "/" + fileKey,
						fileName: fileObj.file.name
					})
				}
			
			}
			
			
		});
	})


}

 

vue文件裏的upload組件修改，主要修改:http-request="uploadOss" 和 action=""這兩個地方

<el-upload action="" :http-request="uploadOss" :multiple="true" :on-success="uploadCoverMore" :show-file-list="false" name="image">
       <el-button  size="small" type="primary">批量上傳</el-button>
      </el-upload>

在 組件的success回調中會獲取到返回的url和圖片名稱信息，如果需要上傳進度，在onProgress方法中回調即可