Öffentlicher Upload-Bereich für mehrere Typen von Anhangsbildern auf der Vue-Seite und anwendbares Faltfenster (Beispielcode)

<div Klasse="retuinfo">
          <div Klasse="theadInfo-Überschrift">
            <span></span>
            {{FileDivName}}
          </div>
          <v-Modell ausblenden="defaultCollapse">
            <Panel v-for="(Element, pngIndex) in pngFileArray" v-bind:key="pngIndex" :name="Element.num" v-show="Element.isshow">
              {{item.name}}
              <div Klasse="obsfilesdiv" Slot="Inhalt">
                <div v-for="(obs,index) in item.files" v-bind:key="index" class="obsfileslist">
                  <input ref="fileImg" type="file" accept="image/*;capture=camera" style="display: none;"
                    @change="setObsFile(item.num,1,obs.FileType,obs.Num,obs.Code)">
                  <label style="color:#6d7180; font-size: 20px;">{{obs.FileType}}<span style="color:red;"
                      v-show="obs.FileType!='Andere'">*</span></label>
                  <ul Klasse="obsfilesul">
                    <li v-for="(objitem,objindex) in obs.FileObj" v-bind:key="objindex">
                      <img :src="objitem.imgurl ? objitem.imgurl : Datei-URL"
                        @click="showObsFiles(obs.FileFlag,objitem.imgurl)" />
                      <img src="../../../img/other/wrong.png" v-show="objitem.IsCanEdit" class="falsche_klasse"
                        @click="deleteObsFlie(item.num,index,objindex,objitem.imgid,objitem.imgurl)" />
                    </li>
                    <li style="border: 4px solid #f3f3f3;" @click="PlusClick(obs.FileType,obs.FileFlag,obs.Num)">
                      <img src="../../../img/icon-adds.png" alt="" />
                    </li>
                    <div Stil="clear:both;"></div>
                  </ul>
                </div>
              </div>
            </Panel>
          </Zusammenklappen>
        </div>
        <div Klasse="modal" v-show="viewBigImg">
            <div Klasse = "img-view-modal" Stil = "text-align: right;">
                <img :src="viewImgURL" style="width: 100%;" @click="hideShow(0)">
                <Symboltyp="md-close" Stil="margin-right: 20px;" Größe='20' @click="hideShow(0)" />
            </div>
        </div>
      </div>

pngFileArray: [{
            Zahl: '0',
            Name: 'Komplettes Fahrzeug',
            isshow: localStorage.getItem("Rollenname").indexOf('Qualitätsprüfer für Typenschild') != -1 ? true : false,
            Dateien: [ //FileFlag://1:Bild; 2:Video 3.Andere {
                Dateityp: 'Bild des Fahrzeugtypenschilds',
                Code: '201',
                Anzahl: 0,
                Dateiflagge: 1,
                Dateiobj: [],
                IsNoFile: true
              },
              {
                Dateityp: 'VIN-Bild des Fahrzeugrahmens',
                Code: '207',
                Anzahl: 1,
                Dateiflagge: 1,
                Dateiobj: [],
                IsNoFile: true
              },
              {
                Dateityp: „Terminal Image“,
                Code: '301',
                Anzahl: 2,
                Dateiflagge: 1,
                Dateiobj: [],
                IsNoFile: true
              }
            ]
          },
          {
            Zahl: '1',
            Name: 'Kilometerstand',
            isshow: localStorage.getItem("Rollenname").indexOf('Account-Manager') != -1 ? true : false,
            Dateien: [{
                Dateityp: 'Kilometerstandfoto',
                Code: '701',
                Anzahl: 3,
                Dateiflagge: 1,
                Dateiobj: [],
                IsNoFile: true
              }
            ]
          }
        ],

//Holen Sie sich die Bilderliste getImageList() {
        dies.$indikator.öffnen({
          Text: „Bild wird geladen …“,
          Spinnertyp: „Schlange“
        });
        lass _this = dies;
        enttäuschenRequest = {
            'crm_vin': diese.parms.crm_vin,
            „crm_fahrzeugnummer“: this.parms.crm_fahrzeugnummer
          };
        let imgListParams = {
          "ImageDownRequest": JSON.stringify(downRequest),
          "Benutzername": localStorage.getItem("usernameone"),
          "Passwort": localStorage.getItem("Passwort")
        };
        console.log("Bilderlistenparameter abrufen:", imgListParams);
        _this.$ajax.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;'; //Anforderungsheader konfigurieren this.$ajax.post(this.imageListUrl, this.$qs.stringify(imgListParams)).then(resdata => {
          _this.$indikator.schließen();
          console.log("Daten der Bildliste abrufen:", resdata);
          Lassen Sie Daten = resdata.data;
          console.log("Konvertierte Bildlistendaten:", data);
          wenn (resdata.status != 200) {
            _dies.$toast({
              Meldung: ,,Bildliste konnte nicht abgerufen werden! ',
              Dauer: 3000
            });
            zurückkehren;
          }
          // Lösche die Liste der Originalbilder first_this.pngFileArray.forEach((rr,index,array) =>{
            für(var Datei=0;Datei<rr.files.length;Datei++){
              _this.pngFileArray[index].files[Datei].FileObj = [];
              _this.pngFileArray[index].files[Datei].IsNoFile = true;
            }
          });
          //Schreibe die Bildliste in jeden Bildklassifizierungsbereich der Seite for(var i=0;i<data.length;i++){
            _this.pngFileArray.forEach((rr,index,array) => {
              für(var Datei=0;Datei<rr.files.length;Datei++){
                wenn(data[i].crm_imagetypeno==rr.files[file].Code){
                  lass putparm = {
                    "IsCanEdit":false,
                    "imgid": Daten[i].crm_careimageId,
                    "imgurl": Daten[i].Bild-URL
                  };
                  _this.pngFileArray[index].files[datei].FileObj.push(putparm);
                  _this.pngFileArray[index].files[Datei].IsNoFile = false;
                }
              }
            });

          }
        }).catch(Funktion(Fehler) {
          _this.$indikator.schließen();
          _dies.$toast({
            Meldung: Fehler,
            Dauer: 3000
          });
        });
      },

showObsFiles(Typ, URL) { //Bilder oder Videos anzeigen console.log("Anhänge anzeigen: " + Typ);
        if (Typ == 1) { //Bild this.viewBigImg = true;
          diese.viewImgURL = URL;
        } else { //Datei this.$messagebox.alert("Die Dateianzeige wird nicht unterstützt, bitte am PC ausführen!", "Prompt");
          zurückkehren;
        }
      },

PlusClick(Typ, Flagge, Zahl) {
        console.log("Aktueller Anhangstyp: " + Typ);
        console.log("Aktuelle Anhangsnummer: " + num);
        this.currentFileType = Typ;
        if (flag == 1) { // Bild hochladen this.$refs.fileImg[num].dispatchEvent(new MouseEvent('click'));
        } sonst wenn (flag == 2) { // Video hochladen this.$refs.fileVideo[num].dispatchEvent(new MouseEvent('click'));
        } sonst { // Andere Dateitypen this.$refs.filElem[num].dispatchEvent(new MouseEvent('click'));
        }
      },
setObsFile(classify, type, obsFileType, num, code) { //Bild im CRM speichern var _this = this;
        var inputFile; //Dateistream console.log("Bildklassifizierung: " + classify + " " + obsFileType + " " + num) + "Bildkodierung: " + code;
        wenn (Typ == 1) {
          Eingabedatei = this.$refs.fileImg[num].files[0];
          dies.$refs.fileImg[num].value = '';
        }
        var Dateiname = Eingabedatei.name;
        wenn (!Eingabedatei) {
          zurückkehren;
        }
        wenn (inputFile.type == 'image/jpg' || inputFile.type == 'image/jpeg' || inputFile.type == 'image/png' ||
          Eingabedatei.Typ ==
          'Bild/Gif') {} sonst {
          this.$messagebox.alert("Bitte laden Sie ein Bild hoch", "Eingabeaufforderung");
          zurückkehren;
        }
        _dieser.$indikator.öffnen({
          Text: „Datei wird hochgeladen, bitte warten …“,
          Spinnertyp: „Schlange“
        });
        //Bildkomprimierung und Konvertierung in Base64-Dateistrom var reader = new FileReader();
        reader.readAsDataURL(Eingabedatei);
        reader.onloadend = Funktion(e) {
          lass Ergebnis = dieses.Ergebnis;
          console.log('********Unkomprimierte Bildgröße********:' + result.length / 1024)
          _this.pulic.dealImage(Ergebnis, {}, Funktion(base64) {
            console.log('********Komprimierte Bildgröße********:' + base64.length / 1024)
            _this.putObsFile(klassifizieren, Dateiname, base64, obsFileType, Code);
          });
          //reader.result.substring(this.result.indexOf(',')+1);
          // 'Daten:Bild/png;base64,'+Reader.Ergebnis
        }
      },
      putObsFile(classify, fileName, base64, obsFileType, code) { //Extrahiere die öffentlich hochgeladene Bilddateimethode var _this = this;
        let usernameone = this.$Base64.encode("administrator");
        let password = this.$Base64.encode("pass@word1");
        lass parmsImages = {
          crm_newenergyid: localStorage.getItem("crm_newenergyid"),
          vin: _this.parms.crm_vin,
          crm_vehiclenumber: _this.parms.crm_vehiclenumber,
          CareType: Code,
          Erstellt durch: localStorage.getItem("SystemUserId"),
          ImageStr: base64.split(",")[1],
          Benutzername: BenutzernameEins,
          Passwort: Passwort
        }
        lass parms = {
          Bildnachricht: JSON.stringify(parmsImages)
        }
        Konsole.log(JSON.stringify(parmsImages));
        Konsole.log(JSON.stringify(parms));
        _this.$ajax.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;'; //Anforderungsheader konfigurieren _this.$ajax.post(_this.imageSaveUrl, _this.$qs.stringify(parms))
          .then(resdata => {
            _this.$indikator.schließen();
            console.log("Schnittstellenantwortdaten:", resdata);
            Lassen Sie Daten = resdata.data;
            console.log("Konvertierte Antwortdaten:", Daten);
            wenn (resdata.status != 200) {
              _dies.$toast({
                Meldung: ,Speichern fehlgeschlagen!‘ Ausnahme beim Schnittstellenaufruf',
                Dauer: 3000
              });
              zurückkehren;
            }
            //Schreibe die URL des hochgeladenen Bildes zurück in die URL der Bildklassifizierung auf der Seite console.log("Alle Bildtypen unter der aktuellen Klassifizierung: " + JSON.stringify(_this.pngFileArray[parseInt(classify)].files));
            for (var i = 0; i < _this.pngFileArray[parseInt(classify)].files.length; i++) { //Durchsuche das Bildtyp-Array unter der aktuellen Kategorie und weise die vom Hintergrund zurückgegebenen Daten zu if (obsFileType == _this.pngFileArray[parseInt(classify)].files[i].FileType) {
                //Bilddateipfad usw. festlegen putparm
                lass putparm = {
                  "IsCanEdit":true,
                  "imgid": data.crm_careimageId,
                  "imgurl": Daten.Bild-URL
                };
                _this.pngFileArray[parseInt(klassifizieren)].files[i].FileObj.push(putparm);
                _this.pngFileArray[parseInt(klassifizieren)].files[i].IsNoFile = false;
              }
            }
            _this.$messagebox.alert("Anhang erfolgreich hochgeladen", "Eingabeaufforderung");
          }).catch(err => {
            console.log(JSON.stringify(err));
            _dies.$toast({
              Meldung: „Hochladen fehlgeschlagen“,
              Dauer: 1500
            });
            _this.$indikator.schließen();
          });
      },

deleteObsFlie(classify,num,index,id,url) { //Anhang löschen var _this = this;
        this.$messagebox.confirm('Möchten Sie dieses Bild wirklich löschen?', "Bestätigen").then(action => {
          var del_param = {
            "id": ID,
            "url": URL
          };
          _dieser.$indikator.öffnen({
            Text: „Bilder werden gelöscht, bitte warten …“,
            Spinnertyp: „Schlange“
          });
          _this.$ajax.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;'; //Anforderungsheader konfigurieren _this.PromiseCall(_this.DelImgFilesURL, _this.$qs.stringify(del_param))
            .dann(data => {
              _this.$indikator.schließen();
              Konsole.log(JSON.stringify(Daten));
              wenn (Daten.Status != 200) {
               _this.$messagebox.alert("Bild konnte nicht gelöscht werden", "prompt");
               zurückkehren;
              }
              _this.pngFileArray[parseInt(klassifizieren)].files[num].FileObj.splice(index, 1);
              _dies.$toast({
                Meldung: „Bild erfolgreich gelöscht“,
                Dauer: 1500
              });
            }).catch(err => {
              _this.doCatch(err);
              _dies.$toast({
                Meldung: 'Bild konnte nicht gelöscht werden'+err,
                Dauer: 1500
              });
              _this.$indikator.schließen();
            });
        });
      },

.retuinfo {
    Breite: 96%;
    Höhe: automatisch;
    Rand oben: 20px;
    Rand links: 2 %;
    Hintergrundfarbe: #F5F7FA;
    Rahmenradius: 15px;
  }
.theadInfo-Überschrift {
    Breite: 100 %;
    Höhe: 80px;
    Hintergrund: #F3F3F3;
    Anzeige: Flex;
    Polsterung links: 30px;
    Elemente ausrichten: zentrieren;
    Schriftgröße: 28px;
    Farbe: #666666;
    Rahmenradius: 15px;
  }
  .theadInfo-headline span {
    Breite: 6px;
    Höhe: 32px;
    Hintergrund: #5576AB;
    Rahmenradius: 3px;
    Rand rechts: 10px;
  }
.ivu-collapse-header {
    Höhe: 40px;
    Elemente ausrichten: zentrieren;
    Anzeige: Flex;
  }
.obsfilesdiv {
    Breite: 100 %;
    Höhe: automatisch;
    Rand oben: .5rem;
    Rand unten: 50px;
}
.obsfileslist {
    Breite: 100 %;
    Höhe: automatisch;
    Polsterung: 0,5rem 0,5rem;
    Hintergrund: #fff;
}
.obsfilesul {
    Breite: 100 %;
    Höhe: automatisch;
    Polsterung unten: 8px;
}
.obsfilesul li {
    Breite: 120px;
    Höhe: 120px;
    schweben: links;
    Rand oben: .3rem;
    Überlauf: versteckt;
    Rand rechts: .3rem;
    Rand: keiner;
}
.obsfilesul li img {
    Breite: 100 %;
    Höhe: 100%;
}
.imglist {
    Breite: 100 %;
    Rand oben: .5rem;
    Rand unten: 6rem;
}
.modal {
    Hintergrundfarbe: #A9A9A9;
    Position: fest;
    Z-Index: 99;
    links: 0;
    oben: 0;
    Breite: 100 %;
    Höhe: 100%;
    Polsterung oben: 4rem;
    /*Deckkraft: 0,5;*/
    Elemente ausrichten: zentrieren;
    /*Definieren Sie die vertikale Mitte des Körperelements*/
    Inhalt ausrichten: zentriert;
    /*Definieren Sie die horizontale Mitte der Elemente im Körper*/
}
.modal img {
    Animationsname: Zoom;
    Animationsdauer: 0,6 s;
    Anzeige: Block;
    Polsterung: 10px;
    Rand: automatisch;
    maximale Breite: 100 %;
    maximale Höhe: 100 %;
    Kastenschatten: 0 2px 6px rgb(0, 0, 0, 0), 0 10px 20px rgb(0, 0, 0, 0);
    Rahmenradius: 12px;
    Rand: 1px durchgehend weiß;
    Position: absolut;
    oben: 50 %;
    transformieren: verschiebeY(-50%);
}
.showname {
    Breite: 100px;
    Höhe: 60px;
    Position: relativ;
    oben: -4,5rem;
    Leerzeichen: normal;
    Wörtertrennung: alles trennen;
    Zeilenumbruch: Wort umbrechen;
}
.falsche_Klasse {
    Breite: 30 % !wichtig;
    Höhe: 30 % !wichtig;
    Position: relativ;
    oben: -3,8rem;
    links: 2,6rem;
}
.falsche_Klasse {
    Breite: 4 % !wichtig;
    Höhe: 4 % !wichtig;
    Position: relativ;
    /*oben: -5,2em;*/
    links: 0,5rem;
}