Implementierung von JavaScript zum Herunterladen und Hochladen verknüpfter Bilder

// Prüfen, ob der Link auf ein Bild verweist und heruntergeladen werden kann export const checkImgExists = (imgurl: string) => {
 returniere neues Promise(Funktion (auflösen, ablehnen) {
  var ImgObj = neues Bild();
  ImgObj.src = imgurl;
  ImgObj.onload = Funktion (Res) {
   Entschlossenheit (res);
  };
  ImgObj.onerror = Funktion (Fehler) {
   ablehnen(fehler);
  };
 });
};

// wie man es benutzt
checkImgExists(imgLink)
 .then(() => {
  // mach etwas mit imgLink
  Konsole.log(imgLink);
 })
 .catch((err) => {
  // ein Protokoll oder Alarm
  console.log(fehler);
  console.log("Leider kann dieser Link das Bild nicht abrufen");
 });

// Machen Sie eine XMLHttpRequest-Anfrage an das Bild im Bildlink und geben Sie ein Blob-Objekt zurück function getImageBlob(url: string) {
 returniere neues Promise(Funktion (auflösen, ablehnen) {
  var xhr = neue XMLHttpRequest();
  xhr.open("abrufen", URL, wahr);
  xhr.responseType = "Blob";
  xhr.onload = Funktion () {
   wenn (dieser.status == 200) {
    lösen(diese.Antwort);
   }
  };
  xhr.onerror = ablehnen;
  xhr.senden();
 });
}

// Konvertiere das Blob-Objekt in ein Dateiobjekt const blobToFile = (blob: Blob, fileName: string) => {
 gibt ein neues Fenster zurück.Datei([Blob], Dateiname, {Typ: Blob.Typ});
};

// wie man es benutzt
// Gibt ein File-Objekt zurück, das für Upload-Operationen verwendet werden kann getImageBlob(src).then(async (res: any) => {
 const srcSplit = src.split("/");
 const Dateiname = srcSplit[srcSplit.Länge - 1];
 return blobToFile(res, Dateiname);
});

OSS von „ali-oss“ importieren;

const ERROR_TIP = "Hochladen fehlgeschlagen!";

/**
 * Beispiel für das Hochladen einer Datei in OSS* Die relevanten accessKeyId, der Bucket und andere Parameter müssen entsprechend Ihrer OSS-Bibliothek ausgefüllt werden. * Es wird empfohlen, die beiden vertraulichen Informationen [accessKeyId, accessKeySecret] in eine Schnittstelle zum Abrufen oder Verschlüsseln zu integrieren. */
exportiere const uploadToOSS = async (
 Dateiname: Zeichenfolge,
 Datei: Datei,
 accessKeyId: Zeichenfolge,
 accessKeySecret: Zeichenfolge,
 ...Requisiten
) => {
 let client = neues OSS({
  endpoint, // Der OSS-Projektadress-Bucket, für den Sie sich beworben haben, // OSS-Objektträger accessKeyId, // Ihre accessKeyId bei OSS
  accessKeySecret, // Ihr accessKeySecret mit OSS
  intern: wahr,
  ...Requisiten,
 });
 const putResult = warte auf Client.put(Dateiname, Datei, {
  Zeitüberschreitung: 60 * 1000 * 2,
 });
 wenn (putResult.res.status === 200) {
  return { url: putResult.url, Dateiname };
 }
 neuen Fehler werfen (ERROR_TIP);
};

// Konvertiere das Blob-Objekt in ein FormData-Objekt const blobToFormData = (blob: Blob, fileName: string) => {
 const formdata = neue FormData();
 formdata.append("Datei", Blob, Dateiname);
 Formulardaten zurückgeben;
};

// XMLHttpRequest
const uploadFile = (formData: FormData) => {
 const url = "Ihre_Schnittstelle";
 let xhr = neue XMLHttpRequest();
 xhr.onload = Funktion () {
  console.log("ok");
  Konsole.log(JSON.parse(xhr.responseText));
 };
 xhr.onerror = Funktion () {
  console.log("Fehler");
 };
 xhr.open("Beitrag", URL, wahr);
 xhr.send(formData);
};

// Ajax
const uploadFile2 = (formData: FormData) => {
 const url = "Ihre_Schnittstelle";
 $.ajax({
  URL (URL = URL = URL),
  Typ: "POST",
  Daten: Formulardaten,
  asynchron: falsch,
  Cache: falsch,
  Inhaltstyp: false,
  Prozessdaten: false,
  Erfolg: Funktion (Returndata) {
   Konsole.log(Daten zurückgeben);
  },
  Fehler: Funktion (Returndata) {
   Konsole.log(Daten zurückgeben);
  },
 });
};

const express = erfordern("express");
const listenNumber = 5000;
const app = express();
const bodyParser = erfordern("body-parser");
const http = require("http"); //Server erstellen const formidable = require("formidable");
const path = require("Pfad");
const fs = erfordern("fs");
app.use(express.static("../../upload"));
app.use(bodyParser.urlencoded({ erweitert: false }));
app.use(bodyParser.json()); //Daten JSON-Typ // Bild hochladen app.post("/upLoadArticlePicture", (req, res, next) => {
 let defaultPath = "../../upload/";
 let uploadDir = path.join(__dirname, defaultPath);
 let form = neues formidable.IncomingForm();
 let getRandomID = () =>
  Zahl(Math.random().toString().substr(4, 10) + Date.now()).toString(36);
 form.uploadDir = uploadDir; //Cache-Verzeichnis für hochgeladene Dateien festlegen form.encoding = "utf-8"; //Bearbeitung festlegen form.keepExtensions = true; //Suffix beibehalten form.maxFieldsSize = 2 * 1024 * 1024; //Dateigröße form.parse(req, function (err, fields, files) {
  wenn (Fehler) {
   res.locals.error = Fehler;
   res.render("index", { title: TITEL });
   zurückkehren;
  }
  let filePath = files.file["Pfad"];
  let backName = filePath.split(".")[1];
  let oldPath = filePath.split("\\")[filePath.split("\\").length - 1];
  let newPath = `${getRandomID()}.${backName}`;
  fs.rename(Standardpfad + alter Pfad, Standardpfad + neuer Pfad, (err) => {
   wenn (!err) {
    neuerPfad = `http://localhost:${listenNumber}/${newPath}`;
    res.json({ flag: true, Pfad: neuerPfad });
   } anders {
    res.json({ Flag: false, Pfad: "" });
   }
  });
 });
});