Speicherlösung zum Hochladen von Bildern

planen	Szenen	Ist es Mainstream
Speichern Sie auf dem normalen Server Ihres Unternehmens	Einfache Szene mit wenigen Bildern	NEIN
Gespeichert auf einem Cloud-Server eines Drittanbieters	Eine große Anzahl von Bildern und Videos usw. und zusätzliche Funktionen sind erforderlich, z. B. Wasserzeichenverarbeitung, Videoüberprüfung usw. (Profis machen professionelle Dinge) Qiniu Cloud/Tencent Cloud/Alibaba Cloud	Ja

Die tatsächliche Ressource des Bildes wird auf dem Cloud-Server eines Drittanbieters gespeichert, und unsere eigene Datenbank speichert eine gültige Bild-URL-Adresse

4. Tencent Cloud cos-Anwendungskonfiguration

Erstellen Sie einen kostenlosen Cloud-Speicher mit standardmäßigen Tencent Cloud-Diensten

1. Erstellen Sie ein Konto für die Echtnamen-Authentifizierung

Hier müssen Sie Ihre richtigen Namensinformationen eingeben, seien Sie versichert zu schreiben, wird nicht auslaufen

2. Erstellen Sie einen Bucket

3. Cors-Regeln festlegen

Da wir den Upload testen, sind alle Uploads zulässig, und die reale Produktionsumgebung muss bestimmte Domänennamen und Betriebsmethoden separat konfigurieren

4. Anweisungen zur Tastenkonfiguration

Der Server ist persönlich und erfordert bestimmte Berechtigungen, um Bilder frei hochzuladen. Die Person, die für die Überprüfung der Berechtigung verantwortlich ist, ist eigentlich der geheime Schlüssel, was bedeutet, dass der Besitz des geheimen Schlüssels eine notwendige Voraussetzung für das Hochladen ist

Tastenkonfiguration

Sicherheitstipps

In der tatsächlichen Arbeit ist der geheime Schlüssel eine sensible Information und kann nicht direkt im Front-End gespeichert werden, was anfällig für Sicherheitsprobleme ist.Ein besserer Ansatz besteht darin, den geheimen Schlüssel an das Back-End-Managementzu übergeben den geheimen Schlüssel, indem Sie zuerst die Schnittstelle aufrufen.Nachdem Sie den geheimen Schlüssel haben, laden Sie ihn hoch

5. Bild hochladen

Wählen Sie ein Bild über die Upload-Komponente aus und laden Sie das Bild auf den Cloud-Server hoch. Der Cloud-Dienst gibt uns eine gültige Bild-URL zurück ->

<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)
    },
// 上传完毕自动执行
    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

Upload und Echo implementieren

Implementieren Sie die Upload-Funktion gemäß der Upload-API von cos

Adresse des Tencent Cloud-Dokuments

1- Installieren Sie die SDK-Datei

npm und cos-js-sdk-v5

2- Führen Sie Cos ein und instanziieren Sie das cos-Objekt

Hinweis: Dies kann nur als Test verwendet werden, um zu vermeiden, dass die Schlüssel-ID direkt im js-Code offengelegt wird

Wenn das Front-End den Upload während der eigentlichen Entwicklung noch leitet, ist der korrekte Prozess wie folgt:

Das Front-End muss eine eigene Back-End-Schnittstelle aufrufen, um einen temporären geheimen Schlüssel zu erhalten [er läuft in Kürze ab]
Übergeben Sie den erhaltenen temporären Schlüssel, um ein cos-Objekt zu instanziieren
So übertragen Sie Daten

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

3- Verwenden Sie das cos-Objekt, um den Upload abzuschließen

Object Storage Upload-Objekt-SDK-Dokumentation-Dokumentationszentrum-Tencent Cloud

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