Vue verwendet OSS zum Hochladen von Bildern oder Anhängen

const OSS = erfordern('ali-oss')

const OSSConfig = {
  uploadHost: 'http://xxxxx.oss-cn-shenzhen.aliyuncs.com', //OSS-Upload-AdresseossParams: {
    Region: 'oss-cn-shenzhen',
    success_action_status: '200', // Standard ist 200
    Zugriffsschlüssel-ID: "LTxxxxxxxxxxxxxxxvnkD",
    Zugriffsschlüsselgeheimnis: "J6xxxxxxxxxxxxxxxxiuv",
    Eimer: 'xxxxxxxx-czx',
  },
}

Funktion random_string(Länge) {
  Länge = Länge || 32
  var Zeichen = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678"
  var maxPos = Zeichenlänge
  var pwd = ''
  für (sei i = 0; i < len; i++) {
    pwd += Zeichen.charAt(Math.floor(Math.random() * maxPos))
  }
  Passwort zurückgeben
}

Funktion uploadOSS(Datei) {
  returniere neues Promise(async (auflösen, ablehnen) => {
    const Dateiname = `${random_string(6)}_${file.name}`
    let client = neues OSS({
      Region: OSSConfig.ossParams.region,
      accessKeyId: OSSConfig.ossParams.accessKeyId,
      accessKeySecret: OSSConfig.ossParams.accessKeySecret,
      Eimer: OSSConfig.ossParams.bucket,
    })
    const res = warte auf Client.multipartUpload (Dateiname, Datei).
    // auflösen (res)
    // Oder geben Sie es wie folgt zurück:
    lösen({
        Datei-URL: `${OSSConfig.uploadHost}/${fileName}`,
        Dateiname: datei.name
    })
  })
}

exportieren { hochladenOSS }

<Vorlage>
  <div Klasse="Upload-Datei">
    <el-hochladen
      ref="Datei-Upload"
      Aktion=""
      :headers="uploadProps.headers"
      Listentyp = "Bildkarte"
      :Dateiliste anzeigen="false"
      :http-request="fnUploadRequest"
      :bei-Erfolg="HandleErfolg"
      :on-error="Fehlerbehandlung"
      :before-upload="Upload-Handle"
    >
      <Steckplatz></Steckplatz>
    </el-upload>
  </div>
</Vorlage>

<Skript>
importiere { getAccessToken, getRefreshToken, getAccessTokenTTL } von "@/utils/auth";
importiere { uploadOSS } von '@/utils/oss';

Standard exportieren {
  Name: "Index",
  Daten() {
    zurückkehren {};
  },
  berechnet: {
    BenutzerkontoID() {
      gib dies zurück.$store.state.user.userAccountID;
    },
    uploadProps() {
      zurückkehren {
        // Aktion: `${process.env.VUE_APP_BASE_API}/api/file/upload`,
        Überschriften: {
          // Die Schnittstelle erfordert möglicherweise ein Token: "",
          Autorisierung: getAccessToken(),
        },
        Daten: {},
      };
    },
  },
  Methoden: {
    handleExceed(Datei, Dateiliste){
      // console.log(Datei, Dateiliste);
      this.$message.error('Upload fehlgeschlagen, begrenzen Sie die Upload-Menge auf 10 Dateien!');
    },
    handleUpload(Datei, Dateiliste){
      // console.log(Datei, Dateiliste);
      var testmsg = Datei.Name.Teilzeichenfolge(Datei.Name.letzterIndexvon('.') + 1)
      const-Erweiterung = testmsg === 'xlsx' || testmsg === 'xls' || testmsg === 'docx' || testmsg === 'doc'
        || testmsg === 'pdf' || testmsg === 'zip' || testmsg === 'rar' || testmsg === 'ppt' || testmsg === 'txt'

      const isLimit10M = Dateigröße / 1024 / 1024 < 10
      var bool = false;
      wenn(Erweiterung && isLimit10M){
        bool = wahr;
      } anders {
        bool = falsch;
      }
      if(!Erweiterung) {
        this.$message.error('Bitte wählen Sie den Dateityp des Anhangs!');
        gibt bool zurück;
      }
      wenn(!isLimit10M) {
        this.$message.error('Upload fehlgeschlagen, darf 10 M nicht überschreiten!');
        gibt bool zurück;
      }
      gibt bool zurück;
    },
    handleErfolg(res) {
      // konsole.log(res);
      wenn (res) {
        dies.$emit('fileData', res)
        this.$message.success("Anhang erfolgreich hochgeladen!");
      }
    },
    handleError(Fehler){
      this.$message.error('Anhang konnte nicht hochgeladen werden!');
    },
    // Bild asynchron hochladen fnUploadRequest(options) {
      versuchen {
        // console.log(Optionen);
        let file = options.file; // Datei abrufen
        let res = warte auf UploadOSS(Datei)
        konsole.log(res);
        //Daten zurückgeben this.$emit("fileData", res);
        this.$message.success("Anhang erfolgreich hochgeladen!");
      } fangen (e) {
        this.$message.error('Anhang konnte nicht hochgeladen werden!');
      }
    },
  },
};
</Skript>

<style lang="scss" scoped>
::v-tief .el-upload,
.el-upload--Bildkarte {
  // Breite: 50px;
  Höhe: 0px;
  Rand: keiner;
  Zeilenhöhe: 0;
  Anzeige: Block;
  Hintergrund: #f5f6fb;
}
.el-hochladen {
  Breite: 50px;
}
.img-cont {
  Breite: 50px;
  Höhe: 24px;
  Hintergrund: #f5f6fb;
  .img-Symbol {
    Farbe: #ccc;
  }
  .img-text {
    Schriftgröße: 12px;
    Höhe: 24px;
    Farbe: #000;
  }
}
</Stil>

  	<div Klasse="Aufgabendetail pr">
        <el-form-item label="Grund der Meldung" prop="taskDesc" erforderlich>
          <div Klasse = "Flex-Center Upload-Position">
            <ImgUpload @imgData="imgData" />
            <FileUpload Klasse="ml10" @fileData="fileData" />
          </div>
          <el-Eingabe
            Typ="Textbereich"
            v-Modell="ruleForm.taskDesc"
            Platzhalter="Bitte geben Sie den Grund für die Meldung ein"
            maximale Länge = "200"
            @input="checkiptTaskDesc()"
          ></el-Eingabe>
          <div Klasse="ipt-taskDesc-length">{{checkIptTaskDescLen}}/200</div>
          <div Klasse="img-list mt10 flex">
            <ImgZoomIn :imagesList="imagesList" @deleteImg="deleteImg"></ImgZoomIn>
          </div>
          <div Klasse="dotted-line" v-if="imagesList.length > 0 && filesList.length > 0"></div>
          <div Klasse="Dateielement">
            <HandleFile :filesList="filesList" @deleteFile="deleteFile"></HandleFile>
          </div>
        </el-form-item>
      </div>