首先是安装依赖

复制下面代码即可直接安装

<code>npm install cos-js-sdk-v5 --save

安装过程这里就直接跳过了，这个只是基本操作

接着是进行配置

在项目中的src包下的utils包中创建一个cos.js文件，你也可以跟我一样创建的名字一样，实际上此.js文件可放在任意位置，只不过在导入时的路径会有所不同

在cos.js文件中写入以下代码

<code>//

const COS = require('cos-js-sdk-v5')

// 填写自己腾讯云cos中的key和id (密钥)

var cos = new COS({

SecretId: '身份识别ID', // 身份识别ID

SecretKey: '身份秘钥' // 身份秘钥

});

export{ cos}

使用时，在vue页面进行导入操作

此代码不建议直接复制，要根据自己的情况来，可能cos.js文件放置的包的位置不同而略微有所改变

import { cos } from '../utils/cos.js';

方法代码

我这里的腾讯云的图片设置的是公共读，并不需要签名，所以我赋值的时候是直接赋值的，如果你是个人开发者，也可设置为公共读，理论上来说，没有太大的影响。

<code>//上传

Upload(res) {

// 执行上传操作

cos.putObject({

Bucket: '11-11111111', /* 存储桶 */

Region: 'ap-shanghai', /* 存储桶所在地域，必须字段 */

Key: res.file.name, /* 文件名 */

StorageClass: 'STANDARD', // 上传模式, 标准模式

Body: res.file // 上传文件对象

}, (err, data) => {

console.log(err || data)

// 上传成功之后

if (data.statusCode === 200) {

this.imgUrl = `https:${ data.Location}`;

}

})

},

最后是html代码

html代码可以在很多地方找到，我这里是用的elementUI中自带的上传组件，你也可用自己另找的，这个不同不影响操作

<el-upload

class="upload-demo"code>

action=""code>

multiple

:limit="3"code>

:http-request="Upload"code>

:file-list="fileList">code>

<el-button size="small" type="primary">点击上传</el-button>code>

<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>code>

</el-upload>

最后，有什么不懂的地方欢迎留言