腾讯云，实现图片上传-Toy模板网

这篇具有很好参考价值的文章主要介绍了腾讯云，实现图片上传。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在上传图片的时候,没有现在的接口,这个时候可以实现第三方上传，这里介绍一下腾讯云上传图片。

一.配置一个腾讯云

1.注册账号

...直接登录官网。

2.创建一个存储桶

腾讯云，实现图片上传

3.创建跨域规则

腾讯云，实现图片上传

密钥的作用:

上传文件的时候需要密钥。

二.element-ui上传文件

 <el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

重要的参数:

腾讯云，实现图片上传

文件上传的方法腾讯云，实现图片上传

上传成功腾讯云，实现图片上传

覆盖默认行为,自定义上传腾讯云，实现图片上传

腾讯云，实现图片上传

注意点：

http-request:action失效,和上传成功之后的值也会失效。

三.腾讯云上传使用

1.安装插件

     cos-js-sdk-v5   yarn add  cos-js-sdk-v5

2:导入

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

3:实例化

  let cos = new Cos({
    SecretId: 'COS_SECRETID', // 身份识别 ID
    SecretKey: 'COS_SECRETKEY', // 身份密钥
});

直接搜索密匙获取：

4:使用

  cos.putObject({
    Bucket: 'XXXXXXXXXXXXXXXXXXX', /* 存储桶: */
    Region: 'ap-guangzhou',     /* 存储桶所在地域，必须字段 */
    Key: uid+'',              /* 必须是字符串 */
    StorageClass: 'STANDARD',  // 固定值
    Body: 文件对象, // 上传文件对象
    onProgress: (progressData)=> {
     //   上传进度
        console.log(JSON.stringify(progressData));
    }
}, (err, data)=> {
  // 上传成功或者失败的回调
    console.log(err || data);
});

Bucket:

所在的位置:

腾讯云，实现图片上传

Key:

使用文件对象里面的uid

Region:

 Region: 'ap-chongqing',

四.实际操作

<template>
  <div class="">
    <el-upload
  class="avatar-uploader"
  action="#"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload"
  :http-request="httpRequest"
  >
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
    
  </div>
</template>

<script>
 import Cos from 'cos-js-sdk-v5'
   let cos = new Cos({
    SecretId:'xxxxxxxxxxxxxxxxxxxxxxx', // 身份识别 ID
    SecretKey:'xxxxxxxxxxxxxxxxx', // 身份密钥
});
  export default {
    data() {
      return {
        imageUrl: ''
      };
    },
    methods: {
    httpRequest(res){
    cos.putObject({
    Bucket: 'xxxxxxxxxxxx', /* 存储桶: */
    Region: 'ap-chongqing',     /* 存储桶所在地域，必须字段 */
    Key: res.file.uid+'',              /* 必须是字符串 */
    StorageClass: 'STANDARD',  // 固定值
    Body:res.file, // 上传文件对象
    onProgress: (progressData)=> {
     //   上传进度
        console.log(JSON.stringify(progressData));
    }
},(err,data)=>{
  // console.log(err||data);
  this.imageUrl='http://'+data.Location
});
        

      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isPng=file.type==='image/png'
        const limit=file.size/1024/1024<1
        if (!isPng) {
          alert('请上传png图片')
        }
        if (!limit) {
          alert('请上传1M内图片')   
        }
        return isPng && limit
      }
    }
  }
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

图片：

腾讯云，实现图片上传