Solution de stockage de téléchargement d'images pour la configuration de l'application Tencent cloud cos

目标:Comprendre les solutions de stockage d'images grand public et les processus de téléchargement

descriptif du régime

plan	Scènes	Est-ce courant
Stockez sur le serveur ordinaire de votre entreprise	Scène simple avec peu de photos	Non
Stocké sur un serveur cloud tiers	Un grand nombre d'images et de vidéos, etc., et des fonctions supplémentaires sont nécessaires, telles que le traitement des filigranes, la révision de vidéos, etc. (les professionnels font des choses professionnelles) Qiniu Cloud/Tencent Cloud/Alibaba Cloud	Oui

La ressource réelle de l'image sera stockée dans le serveur cloud tiers, et notre propre base de données stockera une adresse URL d'image valide

Description du flux

Si nous téléchargeons l'image sur le serveur cloud, à quoi ressemble le processus de téléchargement ? La méthode de téléchargement d'images sur le backend est plus polyvalente, car il est plus facile de contrôler le contrôle unifié du backend en concevant certaines stratégies de sécurité telles que le contrôle par clé secrète lors de la transmission d'images.

Configuration de l'application Tencent cloud cos

Objectif : Créer un stockage cloud gratuit à l'aide des services Tencent Cloud prêts à l'emploi

1. Créez un compte pour l'authentification par nom réel

Ici, vous devez remplir les informations de votre vrai nom, soyez assuré d'écrire, ne fuira pas

2. Créez un compartiment

3. Définir les règles cors

Ici, parce que nous testons le téléchargement, tous les téléchargements sont autorisés. L'environnement de production réel doit configurer séparément le nom de domaine spécifique et la méthode de fonctionnement.

4. Instructions de configuration des clés

Le serveur est personnel et nécessite certaines autorisations pour télécharger librement des images. La personne responsable de la vérification des autorisations est en fait la clé secrète, ce qui signifie que la possession de la clé secrète est une condition nécessaire pour le téléchargement.

Paramétrage des clés

conseils de sécurité

Dans le travail réel, la clé secrète est une information sensible et ne peut pas être stockée directement dans le front-end, ce qui est sujet à des problèmes de sécurité. Une meilleure approche consiste à remettre la clé secrète à la gestion du back-end. Le front-end obtient la clé secrète en appelant d'abord l'interface. Après avoir la clé secrète Puis téléchargez

Nous avons terminé ce qui précède, tous les préparatifs ~

5. Composant de téléchargement - package de base

Objectif : encapsuler un composant de téléchargement commun à utiliser par les composants métier

Comprendre les exigences et créer un nouveau composant de téléchargement

comprendre les besoins

Objectif : Les photos de profil des employés et autres noms et numéros de téléphone portable sont plusieurs champs qui se juxtaposent. Ces champs devront être soumis au backend via l'interface à l'avenir

Sélectionnez une image via le composant de téléchargement et téléchargez l'image sur le serveur cloud Le service cloud nous renvoie une URL d'image valide

Créer un nouveau composant de téléchargement public

Notre fonction de téléchargement est basée sur le développement secondaire du composant de téléchargement d'éléments, préparez d'abord le composant de téléchargement elementUI dont nous avons besoin et sélectionnez un exemple de code approprié en fonction de nos besoins commerciaux spécifiques.

Configuration de téléchargement personnalisée

Attribut clé : :http-request="upload" action="#"
Utilisez le comportement personnalisé pour remplacer le téléchargement par défaut. Notez qu'une fois le comportement de téléchargement personnalisé défini, toutes les opérations de téléchargement doivent être mises en œuvre par vous-même, telles que le traitement des données, après avoir téléchargé avec succès les opérations suivantes, la fonction de crochet en cas de succès ne continuera pas à se déclencher

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

<script>
export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  methods: {
// 回调函数 自定义上传逻辑 适合不能直接上传给自己的服务器 需要一些自定义写法上传三方  加上这个之后 组件只负责图片校验 上传部分不管了
    upload(file) {
      console.log(file)
    },
// 上传完毕自动执行 添加:http-request后 当前函数失效
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
// 上传前自动效验 校验通过执行
    beforeAvatarUpload(file) {
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isPNG) {
        this.$message.error('上传头像图片只能是 PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isPNG && isLt2M
    }
  }
}
</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>

Implémenter le téléchargement et l'écho

Réalisez la fonction de téléchargement en fonction de l'API de téléchargement de
l'adresse de document cloud cos Tencent https://cloud.tencent.com/document/product/436/35649#.E7.AE.80.E5.8D.95.E4.B8. 8A.E4 .BC.A0.E5.AF.B9.E8.B1.A1
1- Installer le fichier sdk

npm i cos-js-sdk-v5

2- Introduire Cos et instancier l'objet cos

Remarque : Cela ne peut être utilisé que comme test pour éviter d'exposer directement l'identifiant de la clé dans le code js.
Si le frontal dirige toujours le téléchargement pendant le développement réel, le processus correct est le suivant :
1. Le frontal a besoin pour appeler notre propre interface back-end pour obtenir une clé secrète temporaire [expirera dans un court laps de temps]
2 Transmettez la clé secrète temporaire obtenue pour instancier un objet cos
3 Envoyez les données comme vous le souhaitez

// 引入必要的COS模块
const COS = require('cos-js-sdk-v5')
// 实例化对象
const cos = new COS({
  SecretId: 'xxxx', // 身份识别ID
  SecretKey: 'xxxx' // 身份秘钥
})

3- Utilisez l'objet cos pour terminer l'upload
object storage upload object-SDK Documentation-Documentation Center-Tencent Cloud

upload({file}) {
  if (file) {
    // 执行上传操作
    cos.putObject({
      Bucket: 'xxxxxx', /* 存储桶 */
      Region: 'xxxx', /* 存储桶所在地域，必须字段 */
      Key: file.name, /* 文件名 */
      StorageClass: 'STANDARD', // 上传模式, 标准模式
      Body: file, // 上传文件对象
      onProgress: (progressData) => {
        console.log(JSON.stringify(progressData))
      }
    }, (err, data) => {
      console.log(err || data)
      // 上传成功之后
      if (data.statusCode === 200) {
        this.imageUrl = `https:${data.Location}`
      }
    })
  }
}

6. Composant de téléchargement - utilisation professionnelle

`任务:` Utilisez le mode de communication parent-enfant pour réaliser l'écho de téléchargement d'image

1- Réaliser la soumission d'url à la base de données [de l'enfant au parent]

// 子组件
if (data.statusCode === 200) {
  this.imageUrl = `https://${data.Location}`
  // 执行这个自定义事件把url传出去
  this.$emit('get-url', this.imageUrl)
}

// 父组件
<upload-img  @get-url="getUrl" />
  
getUrl(url) {
  console.log(url)
  // 图片上传完毕之后 用于提交给后端的字段里就有了有效的url
  this.userInfo.staffPhoto = url
}

2- Rafraîchissez et remplissez l'url de l'image [ père à fils + synchronisation de la montre ]

// 父组件
<upload-img :url="userInfo.staffPhoto" @get-url="getUrl" />


// 子组件
props: {
  url: {
    type: String,
    default: ''
  }
},
watch: {
  url: function() {
    this.imageUrl = this.url
  }
}