安装 cos-js-sdk-v5
npm install cos- js- sdk- v5
导入
import Cos from "cos-js-sdk-v5" ;
import cosKye from "@/utils/cos/key" ;
const cos = new Cos ( {
SecretId : 'xxxxx-xxx' ,
SecretKey : 'xxxxx-xxx' ,
} ) ;
< el- form>
< el- form- item label= "上传图片" prop= "pass" >
< el- upload
class = "avatar-uploader"
: show- file- list= "false"
action= "https://jsonplaceholder.typicode.com/posts/"
list- type= "picture-card"
: on- remove= "handleRemove"
: on- change= "beforeAvatarChange"
: auto- upload= "true"
: before- upload= "beforeAvatarUpload"
: on- success= "handleAvatarSuccess"
: http- request= "httprequest"
>
< img v- if = "imageUrl" : src= "imageUrl" class = "avatar" / >
< i v- else class = "el-icon-plus avatar-uploader-icon" > < / i>
< / el- upload>
< / el- form- item>
< / el- form>
httprequest ( res ) {
console. log ( "httprequest-----------" , res) ;
cos. putObject (
{
Bucket : 'xxxxx-xxx' ,
Region : 'xxxxx-xxx' ,
Key : "merchants/categories/" + res. file. name ,
StorageClass : "STANDARD" ,
Body : res. file,
onProgress : ( progressData ) => {
console. log ( "上传进度-------" , JSON . stringify ( progressData) ) ;
} ,
} ,
( err, data ) => {
console. log ( "腾讯云打印----------->>>>>>" , err || data) ;
if ( data) {
this . imageUrl = "https://" + data. Location;
}
}
) ;
} ,
beforeAvatarUpload ( file ) {
const isPNG = file. type === "image/png" ;
const isLt2M = file. size / 1024 / 1024 < 2 ;
if ( ! isPNG) {
this . $message. error ( "上传分类图片只能是 PNG 格式!" ) ;
}
if ( ! isLt2M) {
this . $message. error ( "上传分类图片大小不能超过 2MB!" ) ;
}
return isPNG && isLt2M;
} ,