Der Vue.js-Cloud-Speicher realisiert die Bild-Upload-Funktion

npm ich cos-js-sdk-v5 --speichern

<Vorlage>
  <div>
    <el-hochladen
      Listentyp = "Bildkarte"
      :Grenze="4"
      Aktion=""
      :file-list="Dateiliste"
      :on-preview="Vorschau"
      :http-request="hochladen"
      :on-change="ändern"
      :before-upload="vor dem Hochladen"
      :akzeptieren="Typliste"
      :on-remove="handleEntfernen"
    >
      <i Klasse="el-icon-plus" />
    </el-upload>
    <el-Fortschritt
      v-if="Prozent anzeigen"
      Stil="Breite: 180px"
      :Prozentsatz="Prozent"
    />
    <el-dialog title="Bild" :visible.sync="showDialog">
      <img :src="imgUrl" style="width: 100%" alt="" />
    </el-dialog>
  </div>
</Vorlage>
<Skript>
COS aus „cos-js-sdk-v5“ importieren
const cos = neuer COS({
  SecretId: 'xxx', // geheime ID
  SecretKey: 'xxx' // geheimer Schlüssel
}) // Das instanziierte Paket kann hochgeladen werden und kann in den Speicher-Bucket im Konto hochgeladen werden export default {
  Daten() {
    zurückkehren {
      fileList: [], // Setzt die Bildadresse in ein Array showDialog: false, // Steuert die Anzeige der Popup-Ebene imgUrl: '',
      currentImageUid: null,
      Typliste: "Bild/*",
      showPercent: false, // Ob der Fortschrittsbalken angezeigt werden soll Prozent: 0 // Upload-Fortschritt}
  },
  Methoden: {
    Vorschau(Datei) {
      this.imgUrl = Datei.URL
      this.showDialog = true
    },
    vorUpload(Datei) {
      // Dateitypen, die hochgeladen werden dürfen const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
      wenn (!types.includes(Datei.Typ)) {
        this.$message.error('Hochgeladene Bilder können nur im JPG-, GIF-, BMP- oder PNG-Format vorliegen!')
        return false // return false verhindert das Hochladen des Bildes}
      Konstante maximale Größe = 1024 * 1024
      if (Dateigröße > max.Größe) {
        this.$message.error('Die maximale Bildgröße darf 1 MB nicht überschreiten.')
        return false
      }
      this.currentImageUid = Datei.uid
      this.showPercent = wahr
      returniere wahr
    },
    hochladen(Parameter) {
      // konsole.log(params.file)
      wenn (params.file) {
        // Upload-Vorgang ausführen cos.putObject({
          Bucket: „xxx“, // Speicher-Bucket Region: „ap-nanjing“, // Regionsschlüssel: params.file.name, // Dateiname Body: params.file, // Hochzuladendes Dateiobjekt StorageClass: „STANDARD“, // Der Upload-Modus-Typ kann standardmäßig direkt auf den Standardmodus eingestellt werden onProgress: (progressData) => {
            dieser.Prozent = Fortschrittsdaten.Prozent * 100
          }
        }, (Fehler, Daten) => {
          // Wie verarbeite ich Daten, nachdem sie zurückgegeben wurden? if (err) return
          diese.fileList = diese.fileList.map(item => {
            wenn (item.uid === this.currentImageUid) {
              return { url: 'http://' + Daten.Standort, Name: Artikel.Name }
            }
            Rücksendeartikel
          })
          // console.log(diese.Dateiliste)
        })
      }
    },
    handleRemove(Datei, Dateiliste) {
      diese.Dateiliste = diese.Dateiliste.filter(Element => Element.uid !== Datei.uid)
      // console.log(Datei)
      cos.deleteObject({
        Bucket: 'xxx', /* Erforderlich*/
        Region: ‚ap-nanjing‘, /* Die Region, in der sich der Bucket befindet, Pflichtfeld*/
        Schlüssel: file.name /* Erforderlich*/
      }, (Fehler, Daten) => {
        // console.log(fehler || daten)
      })
    },
    ändern(Datei, Dateiliste) {
      this.fileList = Dateiliste
    }
  }
}
</Skript>

<Vorlage>
  <div Klasse="App-Container">
    <el-Karte>
      <el-tabs>
        <el-tab-pane label="Persönliche Daten">
          <Benutzerinfo />
        </el-tab-pane>
        <el-tab-pane label="Passwort zurücksetzen">
          <!-- Formular einfügen -->
          <el-form
            Beschriftungsbreite = "120px"
            Stil="Rand links: 120px; Rand oben: 30px"
          >
            <el-form-item label="Passwort:">
              <el-input style="width: 300px" type="password" />
            </el-form-item>
            <el-form-item label="Passwort bestätigen:">
              <el-input style="width: 300px" type="password" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary">Zurücksetzen</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="Abteilungsinformationen">
          <Abteilung />
        </el-tab-pane>
        <el-tab-pane label="Avatar auswählen">
          <Bild-Upload />
        </el-tab-pane>
      </el-tabs>
    </el-Karte>
  </div>
</Vorlage>
<Skript>
importiere userInfo aus „./component/Userinfo“
Abteilung aus „./Komponente/Abteilung“ importieren
importiere imageUpload von '@/components/ImagUpload'

Exportstandard ({
  Komponenten:
   'Benutzerinfo': Benutzerinfo,
   'Abteilung': Abteilung,
   'Bild-Upload': Bild hochladen
  },
  // 
    Methoden: {
    hochladen(e) {
      const Datei = e.Zieldateien[0]
      const reader = neuer FileReader()
      reader.readAsDataURL(Datei)
      reader.onload = asynchrone Funktion (e) {
        warte auf Upload({
          Datei: {
            Originalname: '11.jpg',
            Datei: e.target.result
          }
        })
      }
    }
  }

})
</Skript>

Layout aus '@/layout' importieren
Standard exportieren {
  Pfad: '/user',
  Komponente: Layout,
  Kinder: [{
    Pfad: 'Index',
    Komponente: () => import('@/views/user/index'),
    Name: "Benutzer",
    Meta: {
      Titel: 'Benutzerverwaltung',
      Symbol: „Konto“
    }
  },
  {
    Pfad: "Detail",
    Komponente: () => import('@/views/user/detail'),
    Name: "Detail",
    versteckt: wahr,
    Meta: {
      Titel: „Benutzerdetails“,
      Symbol: „Konto“
    }
  }]
}