リンクされた画像をダウンロードしてアップロードするJavaScriptの実装

// リンクが画像を指していてダウンロード可能かどうかを確認します export const checkImgExists = (imgurl: string) => {
 新しいPromise(function(resolve,reject))を返す{
  var ImgObj = 新しいイメージ();
  ::= ::= .src = .imgurl;
  ImgObj.onload = 関数 (res) {
   解決する(res);
  };
  ImgObj.onerror = 関数 (err) {
   拒否(エラー);
  };
 });
};

// 使い方
checkImgExists(画像リンク)
 .then(() => {
  // imgLink を使って何かする
  コンソールログ(画像リンク);
 })
 .catch((エラー) => {
  // ログまたはアラーム
  コンソールログ(エラー);
  console.log("申し訳ありませんが、このリンクでは画像を取得できません");
 });

// 画像リンク内の画像に対してXMLHttpRequestリクエストを行い、Blobオブジェクトを返します。function getImageBlob(url: string) {
 新しいPromise(function(resolve,reject))を返す{
  var xhr = 新しい XMLHttpRequest();
  xhr.open("get", url, true);
  xhr.responseType = "blob";
  xhr.onload = 関数 () {
   （このステータス == 200）の場合{
    応答を解決します。
   }
  };
  xhr.onerror = 拒否;
  xhr.send();
 });
}

// Blob オブジェクトを File オブジェクトに変換します const blobToFile = (blob: Blob, fileName: string) => {
 新しい window.File([blob], fileName, { type: blob.type }) を返します。
};

// 使い方
// アップロード操作に使用できる File オブジェクトを返します getImageBlob(src).then(async (res: any) => {
 const srcSplit = src.split("/");
 const ファイル名 = srcSplit[srcSplit.length - 1];
 blobToFile(res, ファイル名) を返します。
});

「ali-oss」からOSSをインポートします。

const ERROR_TIP = "アップロードに失敗しました!";

/**
 * OSS にファイルをアップロードする例* 関連する accessKeyId、バケット、その他のパラメータは、OSS ライブラリに従って入力する必要があります* 2 つの機密情報 [accessKeyId、accessKeySecret] を取得または暗号化するためのインターフェイスにすることをお勧めします*/
エクスポートconst uploadToOSS = async (
 ファイル名: 文字列、
 ファイル: ファイル、
 アクセスキーID: 文字列、
 accessKeySecret: 文字列、
 ...小道具
) => {
 クライアント = 新しいOSS({
  エンドポイント、// 申請した OSS プロジェクト アドレス バケット、// OSS オブジェクト キャリア accessKeyId、// OSS の accessKeyId
  accessKeySecret、// OSS の accessKeySecret
  内部: true、
  ...小道具、
 });
 const putResult = await client.put(fileName, ファイル, {
  タイムアウト: 60 * 1000 * 2、
 });
 （putResult.res.status === 200）の場合{
  戻り値: putResult.url, fileName };
 }
 新しいエラー(ERROR_TIP)をスローします。
};

// Blob オブジェクトを FormData オブジェクトに変換します。const blobToFormData = (blob: Blob, fileName: string) => {
 定数フォームデータ = 新しい FormData();
 formdata.append("ファイル", blob, ファイル名);
 フォームデータを返します。
};

// XMLHttpリクエスト
const uploadFile = (formData: FormData) => {
 const url = "your_interface";
 xhr = new XMLHttpRequest();
 xhr.onload = 関数 () {
  console.log("OK");
  console.log(JSON.parse(xhr.responseText));
 };
 xhr.onerror = 関数（）{
  console.log("失敗");
 };
 xhr.open("post", url, true);
 xhr.send(フォームデータ);
};

// アヤックス
const uploadFile2 = (formData: FormData) => {
 const url = "your_interface";
 $.ajax({
  URL、
  タイプ: "POST",
  データ: フォームデータ、
  非同期: false、
  キャッシュ: false、
  コンテンツタイプ: false、
  プロセスデータ: false、
  成功: 関数 (returndata) {
   console.log(戻りデータ);
  },
  エラー: 関数 (returndata) {
   console.log(戻りデータ);
  },
 });
};

定数 express = require("express");
定数 listenNumber = 5000;
express() は、定数です。
bodyParser は、次のコードで定義されます。
const http = require("http"); // サーバーを作成する const formidable = require("formidable");
定数パス = require("パス");
定数 fs = require("fs");
app.use(express.static("../../upload"));
app.use(bodyParser.urlencoded({extended: false }));
app.use(bodyParser.json()); //データ JSON タイプ // 画像のアップロード app.post("/upLoadArticlePicture", (req, res, next) => {
 defaultPath を "../../upload/" とします。
 uploadDir = path.join(__dirname, defaultPath); とします。
 フォームを新しい formidable.IncomingForm() にします。
 getRandomID = () を実行します =>
  数値(Math.random().toString().substr(4, 10) + Date.now()).toString(36);
 form.uploadDir = uploadDir; //アップロードされたファイルのキャッシュディレクトリを設定します form.encoding = "utf-8"; //編集を設定します form.keepExtensions = true; //サフィックスを保持します form.maxFieldsSize = 2 * 1024 * 1024; //ファイルサイズ form.parse(req, function (err, fields, files) {
  もし（エラー）{
   res.locals.error = err;
   res.render("index", { title: TITLE });
   戻る;
  }
  filePath = files.file["path"]とします。
  backName = filePath.split(".")[1]とします。
  oldPath を filePath.split("\\")[filePath.split("\\").length - 1] とします。
  newPath = `${getRandomID()}.${backName}` とします。
  fs.rename(defaultPath + oldPath, defaultPath + newPath, (err) => {
   もしエラーが起きたら
    newPath = `http://localhost:${listenNumber}/${newPath}`;
    res.json({ フラグ: true、パス: newPath });
   } それ以外 {
    res.json({ フラグ: false、パス: "" });
   }
  });
 });
});