auto-upload-loader

一个自动检测并上传项目中图片资源到远程服务器的工具，支持多种构建工具和框架，包括 Webpack4、Vite 和 Astro。

功能特点

• 自动检测项目中的图片资源（png、jpg、jpeg、gif）
• 支持多种导入方式：require、import 和模板中的 src 属性
• 使用 SHA256 哈希检测图片是否已上传，避免重复上传
• 支持多种框架和构建工具：Webpack4、Vite、Astro
• 自动将本地文件路径替换为远程 URL

调用 setConfig 函数，传入参数。

• requestFn: 必传参数，为上传图片对应的Promise的函数。
• storageName: 缓存文件的名称。
• storagePath: 缓存文件的路径。
• alias: 别名设置，通常在项目中会使用@指代项目的src目录，默认设置了@和~为src，可自行更改。

安装

npm install auto-upload-loader --save-dev

或使用 pnpm:

pnpm add auto-upload-loader -D

基本配置

所有框架集成方式都需要设置以下基本配置：

const config = {
  // 必传参数，上传图片的异步函数，需返回 Promise<string>
  requestFn: (filePath) => {
    return new Promise((resolve) => {
      // 在这里实现文件上传逻辑，返回远程 URL
      resolve("https://example.com/path/to/image.jpg");
    });
  },
  
  // 可选：缓存文件名称，默认为 "state-lock"
  storageName: "state-lock",
  
  // 可选：路径别名设置
  alias: [
    { find: "@", replace: "./src" },
    { find: "~", replace: "./src" }
  ]
};

框架集成

Vite 集成

// vite.config.js
import { defineConfig } from 'vite';
import { createImageUploadPlugin } from 'auto-upload-loader/vite';

export default defineConfig({
  plugins: [
    createImageUploadPlugin({
      requestFn: (filePath) => {
        // 上传实现...
        return Promise.resolve("https://example.com/image.jpg");
      }
    })
  ]
});

Webpack4 集成

在 vue.config.js 中：

// vue.config.js
const ImageUploadPlugin = require('auto-upload-loader/webpack4');

module.exports = {
  configureWebpack: {
    plugins: [
      new ImageUploadPlugin({
        requestFn: (filePath) => {
          // 上传实现...
          return Promise.resolve("https://example.com/image.jpg");
        }
      })
    ]
  }
};

Astro 集成

// astro.config.mjs
import { defineConfig } from 'astro/config';
import autoUploadService from 'auto-upload-loader/astro';

// 需要在其他地方配置 requestFn
import { setConfig } from 'auto-upload-loader';
setConfig({
  requestFn: (filePath) => {
    // 上传实现...
    return Promise.resolve("https://example.com/image.jpg");
  }
});

export default defineConfig({
  integrations: [
    {
      name: 'auto-upload-service',
      hooks: {
        'astro:build:setup': ({ vite }) => {
          // 集成到 Astro 构建过程
          vite.plugins = [
            ...(vite.plugins || []),
            {
              name: 'auto-upload-transform',
              transform(code, id) {
                // 处理逻辑
              }
            }
          ];
        }
      }
    }
  ]
});

缓存机制

插件会在项目根目录下创建 state-lock.json 文件，用于缓存已上传图片的哈希值和远程 URL 映射。这样可以避免重复上传相同的图片，加快构建速度。

文件格式示例：

{
  "hash1": "https://example.com/image1.jpg",
  "hash2": "https://example.com/image2.jpg"
}

注意事项

动态导入限制

通过变量动态构建路径的 require() 不能被正确处理，例如：

// ❌ 不支持 - 无法正确上传
const img = require(`../static/img/${name}.png`);

推荐改写为显式导入：

// ✅ 支持 - 会正确上传
const imageUrls = [
  require("../static/img/1.png"),
  require("../static/img/2.png")
];
return imageUrls[index];

异步上传影响

由于图片上传是异步操作，在开发模式下多次编译才会使用远程地址。如果没有运行开发模式直接打包，首次打包的输出文件可能仍然使用本地图片路径，导致包体积增大。建议在打包前先运行开发模式，确保所有图片已上传并缓存。