实现上传将图片存储在腾讯云的对象存储中

利用element-ui封装的组件进行上传

<template>
  <el-upload
    action="#"
    :file-list="fileList"
    :http-request="updataImage"//替换action方法
    list-type="picture-card"
     :on-change="updataSuccess"//上传改变时调用
    :on-remove="RemoveImage"//移除照片时调用
  >
    <i class="el-icon-plus" />
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []// 上传图片的列表
    }
  },
  methods: {
    // 上传到腾讯云的方法
    updataImage() {

    },
    // 上传成功的方法
    updataSuccess() {

    },
    // 移除图片的方法
    RemoveImage() {

    }
  }

}
</script>

<style>

</style>

将组件注册到全局组件中

我们利用的是插件的写法

import UpdataImage from '@/components/UpdataImage'
export default {
install(Vue){
    Vue.component('UpdataImage', UpdataImage)
}
}

然后我们在main.js中引入全局组件 main.js

import PageTools from '@/components/index'
Vue.use(PageTools)

配置腾讯云的SDK

cloud.tencent.com/document/pr… 安装依赖

npm i cos-js-sdk-v5

文到中有

var COS = require('cos-js-sdk-v5');

// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
var cos = new COS({
    SecretId: 'SECRETID',
    SecretKey: 'SECRETKEY',
});

我们的SecretId和SecretKey在console.cloud.tencent.com/cam/capi 网站中可以查看 要扫码登录一下

将sdk码添加上去之后我们就可以进行上传对象的配置了

 // 上传到腾讯云的方法
    updataImage(file) {
      console.log(file)
      cos.putObject({
        Bucket: 'xxxxxxx', /* 必须存储桶名 */
        Region: 'xxxxxxx', /* 存储桶所在地域，必须字段 */
        Key: 'exampleobject', /* 必须上传后文件的名字 */
        StorageClass: 'STANDARD',
        Body: file.file, // 上传文件对象
        // 上传文件的进度条
        onProgress: function(progressData) {
          console.log(JSON.stringify(progressData))
        }
      }, function(err, data) {
        console.log(err || data)
      })
    },

配置好后我就可以运行组件看看是否上传成功了!

成功后的结果如下

获取上传成功后的网络地址

将获取到上传成功后的网络地址保存到fileList: []// 上传图片的列表 中

在这里我们利用element-ui中el-upload 中的属性:on-change上传改变时调用

为我们的上传头像导入进度条

<el-progress :text-inside="true" :stroke-width="24" :percentage="0" status="success"></el-progress>

我们要为我们的进度条绑定动态上传进度，上传时显示，上传结束时隐藏，上传过程中进度条有变化

那我们应该在哪获取文件上传进度呢？

此时我们会遇到一个报错

在这里我们的this指向不同，我们要改为箭头函数

此时我们又遇到了问题，进度条没变化，又是this指向问题

改为箭头函数

当我们进度条默认不显示，上传时显示进度条，上传成功时隐藏进度条和上传框

当上传一张照片成功时隐藏上传框

设置样式，因为不知道为什么我在样式加scoped不生效，然后我就将组建包了个div和几个类名

当移除图片时上传框显示出来

我的做法是将数组清空

完成！

<template>
  <div class="updataImage">
    <el-upload
      :class="{isDisplay:fileList.length!==0?true:false}"
      action="#"
      :file-list="fileList"
      :http-request="updataImage"
      list-type="picture-card"
      :on-change="updataSuccess"
      :on-remove="RemoveImage"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-progress v-show="isShowProgress" :text-inside="true" :stroke-width="25" :percentage="progress" status="success" />
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
const cos = new COS({
  SecretId: 'xxxxxx',//sdk密钥上面文章有获取方法
  SecretKey: 'xxxxx'
})
export default {
  data() {
    return {
      fileList: [], // 上传图片的列表
      isShowProgress: false,
      progress: 0
    }
  },
  methods: {
    // 上传到腾讯云的方法
    updataImage(file) {
      console.log(file)
      const fileName = file.file.name.split('.')[0]
      cos.putObject({
        Bucket: 'xxxxxxx', /* 必须存储桶名 */
        Region: 'xxxxxx', /* 存储桶所在地域，必须字段 */
        Key: fileName, /* 必须上传后文件的名字 */
        StorageClass: 'STANDARD',
        Body: file.file, // 上传文件对象
        // 上传文件的进度条
        onProgress: (progressData) => {
          console.log(JSON.stringify(progressData))
          this.progress = progressData.percent * 100
        }
      }, (err, data) => {
        // err是判断上传是否错误,data是上传成功后的结果
        if (err) {
          return this.$message.error('图片上传失败!')
        }
        // 打印图片上传成功后返回的数据
        console.log(data)
        console.log(this.fileList)
        this.fileList[0].url = 'http://' + data.Location
        this.fileList[0].status = 'success'
        this.isShowProgress = false
      })
    },
    // 上传成功前之前的方法
    updataSuccess(file) {
      console.log(file)
      this.isShowProgress = true
      this.fileList.push({
        url: file.url, // 地址
        status: 'ready'// 还没上传成功的状态
      })
    },
    // 移除图片的方法
    RemoveImage() {
      this.fileList = []
    }
  }

}
</script>

<style lang="scss" >
.updataImage{
    .isDisplay{
.el-upload--picture-card{
    display: none;
}
    }

}

</style>

我们可以在上传成功的回调函数中将网络地址上传到服务器

我们还得在父组件中判断是否上传完成图片

 const file = this.$refs.saveUser.fileList[0]
      // 文件file存在时为true，因为当你点击上传文件就会存在file，当文件状态不等于success是为true就是为上传完成
      if (file && file.status !== 'success') {
        console.log(123)
        return this.$message.warning('图片未上传完成,请等待！')
      }
      ==========================================
     下面代码是利用ajax将头像或照片更新到服务器

完成！！！！！