Tencent cloud, realize image upload

When uploading pictures , There is no current interface , At this time, third-party uploading can be realized , Here is an introduction to the pictures uploaded by Tencent cloud .

One . Configure a Tencent cloud

1. Registered account

... Log in to the official website directly .

2. Create a bucket

 

 

 

 

3. Create cross domain rules

 

 

  The function of the key :

You need a key when uploading files .

Two .element-ui Upload files

 <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>

Important parameters :

 

How to upload files  

  Upload successful

  Override default behavior , Custom upload

 

 

Be careful ：

   http-request:action invalid , And the value after successful upload will also be invalid .

3、 ... and . Tencent cloud upload

1. Installing a plug-in

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

  2: Import

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

  3: Instantiation

  let cos = new Cos({
    SecretId: 'COS_SECRETID', //  Identity recognition  ID
    SecretKey: 'COS_SECRETKEY', //  Identity key 
});

Search the key directly to get ：

  4: Use

  cos.putObject({
    Bucket: 'XXXXXXXXXXXXXXXXXXX', /*  bucket : */
    Region: 'ap-guangzhou',     /*  The area where the bucket is located , Required fields  */
    Key: uid+'',              /*  Must be a string  */
    StorageClass: 'STANDARD',  //  Fixed value 
    Body:  File object , //  Upload file object 
    onProgress: (progressData)=> {
     //    Upload progress 
        console.log(JSON.stringify(progressData));
    }
}, (err, data)=> {
  //  Callback for upload success or failure 
    console.log(err || data);
});

 Bucket: 

  Where it is :

  Key:

  Use the uid

  Region:

 Region: 'ap-chongqing', 

Four . Actual operation

<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', //  Identity recognition  ID
    SecretKey:'xxxxxxxxxxxxxxxxx', //  Identity key 
});
  export default {
    data() {
      return {
        imageUrl: ''
      };
    },
    methods: {
    httpRequest(res){
    cos.putObject({
    Bucket: 'xxxxxxxxxxxx', /*  bucket : */
    Region: 'ap-chongqing',     /*  The area where the bucket is located , Required fields  */
    Key: res.file.uid+'',              /*  Must be a string  */
    StorageClass: 'STANDARD',  //  Fixed value 
    Body:res.file, //  Upload file object 
    onProgress: (progressData)=> {
     //    Upload progress 
        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(' Please upload png picture ')
        }
        if (!limit) {
          alert(' Please upload 1M Inside picture ')   
        }
        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>

picture ：

 

  Look, everyone , Ongoing update .