本文详解如何在 JavaScript 中通过 Image 对象验证图片链接有效性，利用 XMLHttpRequest 下载图片为 Blob 格式。接着介绍将 Blob 转换为 File 或 FormData 对象的方法，分别演示了上传至阿里云 OSS 及自建 Node.js 服务器的完整流程与代码示例。
验证图片链接有效性
在进行图片上传操作前，首要步骤是验证链接是否指向有效的可下载图片资源。虽然可以使用正则表达式判断链接后缀，但这种方法存在局限性，因为部分合法图片链接并不包含后缀名；若完全放开限制，则可能增加安全风险。因此，本文采用创建 Image 对象并尝试加载的方式来判断：若图片成功加载，则确认为有效图片资源且可下载。
// 判断链接是否指向图片且可下载
export const checkImgExists = (imgurl: string) => {
return new Promise(function (resolve, reject) {
var ImgObj = new Image();
ImgObj.src = imgurl;
ImgObj.onload = function (res) {
resolve(res);
};
ImgObj.onerror = function (err) {
reject(err);
};
});
};
// how to use it
checkImgExists(imgLink)
.then(() => {
// do something with imgLink
console.log(imgLink);
})
.catch((err) => {
// some log or alarm
console.log(err);
console.log("很抱歉, 该链接无法获取图片");
});
确认图片链接有效后，下一步是执行下载操作。这里推荐使用 XMLHttpRequest 发起请求，下载完成后将获得一个 Blob 对象，作为后续处理的数据基础。
获取到 Blob 对象后，可根据具体业务需求将其转换为 FormData 对象或 File 对象，以适配不同的上传策略。例如，若目标是将图片存储至阿里云 OSS，建议转换为 File 对象；若上传至自建服务器，则可通过 Ajax 或 XMLHttpRequest 将 Blob 转换为 FormData 进行上传。
下载图片并转换为 Blob
// 将图片链接中的图片进行 XMLHttpRequest 请求，返回Blob对象
function getImageBlob(url: string) {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open("get", url, true);
xhr.responseType = "blob";
xhr.onload = function () {
if (this.status == 200) {
resolve(this.response);
}
};
xhr.onerror = reject;
xhr.send();
});
}
// 将Blob对象转为File对象
const blobToFile = (blob: Blob, fileName: string) => {
return new window.File([blob], fileName, { type: blob.type });
};
// how to use it
// 返回一个File对象，可使用该 File 对象进行上传操作
getImageBlob(src).then(async (res: any) => {
const srcSplit = src.split("/");
const filename = srcSplit[srcSplit.length - 1];
return blobToFile(res, filename);
});
以下是一个上传至阿里云 OSS 的示例。鉴于 OSS 配置涉及 accessKeyId、accessKeySecret 等敏感信息，强烈建议通过后端接口动态获取这些凭证，或使用临时安全令牌（STS）以提高安全性，避免在前端代码中硬编码敏感数据。
上传至阿里云 OSS 示例
import OSS from "ali-oss";
const ERROR_TIP = "上传失败！";
/**
* File上传OSS的示例
* 相关accessKeyId、bucket等参数需要根据你的OSS库进行填写
* 建议将【accessKeyId，accessKeySecret】这两个敏感信息做成接口获取或者加密
*/
export const uploadToOSS = async (
fileName: string,
file: File,
accessKeyId: string,
accessKeySecret: string,
...props
) => {
let client = new OSS({
endpoint, // 你申请好的oss项目地址
bucket, // OSS 对象载体
accessKeyId, // your accessKeyId with OSS
accessKeySecret, // your accessKeySecret with OSS
internal: true,
...props,
});
const putResult = await client.put(fileName, file, {
timeout: 60 * 1000 * 2,
});
if (putResult.res.status === 200) {
return { url: putResult.url, fileName };
}
throw new Error(ERROR_TIP);
};
若需将图片上传至用户自己的服务器，可将 Blob 格式的数据转换为 FormData 格式，随后使用 XMLHttpRequest 或 Ajax 发起 POST 请求完成图片上传。
上传至自建服务器方案
// 将Blob对象转为FormData对象
const blobToFormData = (blob: Blob, fileName: string) => {
const formdata = new FormData();
formdata.append("file", blob, fileName);
return formdata;
};
// XMLHttpRequest
const uploadFile = (formData: FormData) => {
const url = "your_interface";
let xhr = new XMLHttpRequest();
xhr.onload = function () {
console.log("ok");
console.log(JSON.parse(xhr.responseText));
};
xhr.onerror = function () {
console.log("fail");
};
xhr.open("post", url, true);
xhr.send(formData);
};
// Ajax
const uploadFile2 = (formData: FormData) => {
const url = "your_interface";
$.ajax({
url,
type: "POST",
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
console.log(returndata);
},
error: function (returndata) {
console.log(returndata);
},
});
};
在之前的后端项目中，曾使用 Express 作为静态图片存储服务。以下是 Node.js 环境下接收图片上传的代码示例。需要注意的是，使用 formidable 库解析上传文件时，jpg 文件默认会以较长的随机文件名保存在预设目录中。为了便于管理，示例中使用了较短的名称对文件进行了重命名，开发者可根据实际需求调整重命名策略。
Node.js 后端接收与处理
const express = require("express");
const listenNumber = 5000;
const app = express();
const bodyParser = require("body-parser");
const http = require("http"); //创建服务器的
const formidable = require("formidable");
const path = require("path");
const 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) => {
let defaultPath = "../../upload/";
let uploadDir = path.join(__dirname, defaultPath);
let form = new formidable.IncomingForm();
let getRandomID = () =>
Number(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) {
if (err) {
res.locals.error = err;
res.render("index", { title: TITLE });
return;
}
let filePath = files.file["path"];
let backName = filePath.split(".")[1];
let oldPath = filePath.split("\\")[filePath.split("\\").length - 1];
let newPath = `${getRandomID()}.${backName}`;
fs.rename(defaultPath + oldPath, defaultPath + newPath, (err) => {
if (!err) {
newPath = `http://localhost:${listenNumber}/${newPath}`;
res.json({ flag: true, path: newPath });
} else {
res.json({ flag: false, path: "" });
}
});
});
});至此，关于 JavaScript 下载链接图片后上传的实现方法已介绍完毕。如需了解更多相关技术细节，建议查阅本站过往文章或继续浏览后续内容。感谢大家的支持与关注！