使用腾讯云COS上传对象文件

一、在项目中安装腾讯云COS相关插件

npm i cos-js-sdk-v5 --save

二、在项目中src目录下新建一个sdk文件夹，里面包含一个cos.js文件

在文件中引入COS，并对外暴露一个COS实例

import COS from 'cos-js-sdk-v5'

export default new COS({
      SecretId: 'SECRETID',   //  密钥ID
      SecretKey: 'SECRETKEY'  //  密钥key
})

三、在组件中引入cos.js，并自定义上传方式

ElementUI为上传组件提供了一个http-request属性，我们可以通过这个属性实现自定义上传

<el-upload
    action="#"
    list-type="picture-card"
    :http-request="uploadFn" 
    >
      <i class="el-icon-plus" />
    </el-upload>

uploadFn方法接收一个参数，参数为当前上传的文件相关的集合对象，对象里面的file属性是需要上传的文件对象，如下

四、通过调用cos.putObject()方法实现上传到腾讯云

cos.putObject({
    Bucket: 'examplebucket-1250000000', /* 填入您自己的存储桶，必须字段 */
    Region: 'COS_REGION',  /* 存储桶所在地域，例如ap-beijing，必须字段 */
    Key: '1.jpg',  /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
    StorageClass: 'STANDARD',
    Body: fileObject, // 上传文件对象
    // 上传的进度函数
    onProgress: function(progressData) {
        console.log(JSON.stringify(progressData));
    }
}, function(err, data) {
    console.log(err || data);
});

五、查看上传成功的文件

上传成功后，返回一个data对象，data.Locainon是文件上传后的路径，可以通过https:// 拼接后进行图片的查看，