騰訊雲+element ui 上傳頭像圖片

前面的一些基本操作很簡單，我主要參考這裡，blog.csdn.net/qq_42651173…

1. 騰訊雲開通對象雲存儲（記得開放跨域請求）；
2. 配置密鑰。

配置密鑰的部分一開始我找不到，一開始配置的是API網關那裡的key，報錯403，百度之後在騰訊雲官方對此的解釋中找到了配置密鑰的地方。（在訪問管理裡）cloud.tencent.com/document/pr…

3. 安裝需要的包 npm i cos-js-sdk-v5 這個裡我用這個命令安裝會提示依賴衝突之類的錯誤，似乎是vue版本的問題。在圖形介面直接搜索安裝則沒問題。

4. 網頁代碼

         <el-upload
              class="avatar-uploader" :headers="uploadReqHeader"
              action="#"
              :show-file-list="false"
              :http-request="uploadProfileImg" //這個就是要向騰訊雲對象存儲上傳圖片的方法
              :before-upload="beforeAvatarUpload"
      >

uploadProfileImg(res) {
    if (res.file) {
        var COS = require('cos-js-sdk-v5');
        var cos = new COS({
            SecretId: 'xxxx',
            SecretKey: 'xxxx'
        })
        cos.putObject({
            Bucket: 'save-1304263782',
            /* 填入您自己的存储桶，必须字段 */
            Region: 'ap-hongkong',
            /* 存储桶所在地域，例如ap-beijing，必须字段 */
            Key: res.file.name,
            /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
            StorageClass: 'STANDARD',
            Body: res.file, // 上传文件对象
            onProgress: function(progressData) {
                console.log(JSON.stringify(progressData))
            }
        }, (err, data) => {
            console.log(err || data)
                // 上传成功之后
            if (data.statusCode === 200) {
                this.profileImg = `https://${data.Location}` // 圖片地址被保存在了這裡
            }
        })
    }
}