首先是安装依赖
复制下面代码即可直接安装
npm install cos-js-sdk-v5 --save
安装过程这里就直接跳过了,这个只是基本操作
接着是进行配置
在项目中的src包下的utils包中创建一个cos.js文件,你也可以跟我一样创建的名字一样,实际上此.js文件可放在任意位置,只不过在导入时的路径会有所不同
在cos.js文件中写入以下代码
//
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';
方法代码
我这里的腾讯云的图片设置的是公共读,并不需要签名,所以我赋值的时候是直接赋值的,如果你是个人开发者,也可设置为公共读,理论上来说,没有太大的影响。
//上传
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"
action=""
multiple
:limit="3"
:http-request="Upload"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>