腾讯云存储桶对象存储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...
·
在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方法中回调即可
更多推荐
已为社区贡献2条内容
所有评论(0)