准备事项
通过npm i cos-js-sdk-v5
下载cos-js-sdk-v5
,然后在做图片上传的组件里,通过import COS from 'cos-js-sdk-v5'
引入cos-js-sdk-v5
.
前端部分
解析:这里使用的是element ui 中的上传文件的组件,action表示上传的地址;http-request表示覆盖默认的上传行为,可以自定义上传的实现,类型是function,所以这里的uploadimg是函数;limit表示最多能传多少张图片;list-type表示文件列表的类型;on-change表示文件上传成功或者上传失败是都会触发的函数;auto-upload表示是否在选取文件后立即进行上传;dialogVisible表示当图片上传成功后就会在页面显示该图片;imgURL表示图片上传成功后的url地址;
<div style="display:flex;">
<span style="display: inline-block;width: 91px;">身份证头像:</span>
<el-upload
action="#"
:http-request="uploadImg"
:limit='1'
list-type="picture-card"
:on-change="changeHandle"
:auto-upload="true"
>
<i class="el-icon-plus" />
</el-upload>
<el-dialog :visible.sync="dialogVisible" append-to-body>
<img width="100%" :src="imgURL" alt="">
</el-dialog>
</div>
js部分
在实现图片上传的页面里,引入import COS from 'cos-js-sdk-v5'
import COS from 'cos-js-sdk-v5
data(){
return{
// 修改作品信息弹窗显示与否
dialogVisible: false,
// 图片文件
imgFile: '',
// 图片文件名称
fileName: '',
// 上传成功后的地址
imgURL: '',
}
},
methods:{
// 获取该文件的对象,如下图1-1
changeHandle (file, fileList) {
this.imgFile = file
this.fileName = file.name
},
// 实现上传图片
uploadImg () {
// 创建COS实例 获取签名
//这里写你们后端提供的请求接口即可,这里调用的接口是为了获取tmpSecretId、tmpSecretKey、sessionToken、expiredTime这些值
this.axios.post('接口地址').then(res=>{
const data = res.data.content
const cos = new COS({
// 必选参数
getAuthorization: (options, callback) => {
const obj = {
TmpSecretId: data.tmpSecretId,
TmpSecretKey: data.tmpSecretKey,
XCosSecurityToken: data.sessionToken,
StartTime: data.startTime, // 时间戳,单位秒,如:1580000000
ExpiredTime: data.expiredTime // 时间戳,单位秒,如:1580000900
}
callback(obj)
// 上传图片 其中Bucket 和 Region找你们负责人拿,Bucke和Region是由公司负责人使用公司账户,登入腾讯云,获取回来的。
//key 在前面加上路径写法可以生成文件夹
cos.putObject({
Bucket: 'xunahua-face-1307070664', /* 必须 */
Region: 'ap-beijing', /* 存储桶所在地域,必须字段 */
Key: '/img/' + new Date().getTime() + this.fileName, /* 必须 */
StorageClass: 'STANDARD',
Body: this.imgFile.name, // 上传文件对象
onProgress: progressData => {
}
}, (err, data) => {
// 将上传后的封面进行路径拼接保存到本地
// console.log(err || data)
const url = 'https://' + data.Location
this.imgURL = url
})
}
})
})
},
}
图1-1选择图片后的对象信息