腾讯云 cos ajax,腾讯云存储桶对象存储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=""这两个地方

批量上传

在 组件的success回调中会获取到返回的url和图片名称信息，如果需要上传进度，在onProgress方法中回调即可