@etsuyou/upload-image

v2.0.3

Published

4 months ago

A module helping upload images to ImgTP and return the urls back to you.

Downloads

0High
0Medium
0Low

etsuyou

ImgTP image upload

@etsuyou/upload-image 模块用法示例

版本：v2.0.3
更新时间：2024/05/24
模块作用：通过调用本模块提供的函数方法，可以在浏览器或 Node.js 环境中向默认图床服务器上传图片，并得到该服务器返回的可供公网访问的图片地址。

快速安装

在使用该模块之前，请确保安装了本模块：

npm install @etsuyou/upload-image

安装本模块时会附带安装本模块所需要的所有依赖。

依赖作用

axios: 用于发送 HTTP 请求。
form-data: 用于构建表单数据。
fs: 用于文件系统操作（仅在 Node.js 环境中使用）。

引入方式

CommonJS

如果你使用的是 CommonJS 模块系统，可以这样引入：

const { uploadImage } = require("@etsuyou/upload-image");

ESM

如果你使用的是 ES6 模块系统，可以这样引入：

import { uploadImage } from "@etsuyou/upload-image";

使用示例

Vue 3（浏览器）

Vue 3 组合式

<template>
  <div>
    <!-- 文件输入框，当文件选择改变时触发 changeHandler 方法 -->
    <input type="file" name="file_name" id="file_id" @change="changeHandler" />
  </div>
</template>

<script setup>
  import { uploadImage } from "@etsuyou/upload-image"; // 导入上传图片的函数

  /**
   * 处理文件选择更改事件
   *
   * @param {Event} event - 文件选择事件
   */
  async function changeHandler(event) {
    // 获取用户选择的第一个文件
    const file = event.target.files[0];
    if (!file) return; // 如果没有选择文件，直接返回

    try {
      // 调用 uploadImage 函数上传文件，并等待上传结果
      const res = await uploadImage(file);
      console.log(res); // 成功时输出上传结果
    } catch (error) {
      console.error(error); // 失败时输出错误信息
    }
  }
</script>

Vue 3 选项式

<template>
  <div>
    <!-- 文件输入框，当文件选择改变时触发 changeHandler 方法 -->
    <input type="file" name="file_name" id="file_id" @change="changeHandler" />
  </div>
</template>

<script>
  import { uploadImage } from "@etsuyou/upload-image"; // 导入上传图片的函数

  export default {
    methods: {
      /**
       * 处理文件选择更改事件
       *
       * @param {Event} event - 文件选择事件
       */
      async changeHandler(event) {
        // 获取用户选择的第一个文件
        const file = event.target.files[0];
        if (!file) return; // 如果没有选择文件，直接返回

        try {
          // 调用 uploadImage 函数上传文件，并等待上传结果
          const res = await uploadImage(file);
          console.log(res); // 成功时输出上传结果
        } catch (error) {
          console.error(error); // 失败时输出错误信息
        }
      },
    },
  };
</script>

then 的写法

通过 then 方法处理异步操作：

Node.js 环境

const { uploadImage } = require("@etsuyou/upload-image");

const imagePath = "C:/Users/etsuyou/Desktop/image.jpg";

uploadImage(imagePath)
  .then((data) => {
    console.log(data); // 成功时输出上传结果
  })
  .catch((error) => {
    console.error(error); // 失败时输出错误信息
  });

JS

Axios

const axios = require("axios");
const FormData = require("form-data");
const fs = require("fs");
let data = new FormData();
data.append(
  "image",
  fs.createReadStream("/C:/Users/etsuyou/Desktop/image.jpg")
);

let config = {
  method: "post",
  maxBodyLength: Infinity,
  url: "https://imgtp.com/api/upload",
  headers: {
    ...data.getHeaders(),
  },
  data: data,
};

axios
  .request(config)
  .then((response) => {
    console.log(JSON.stringify(response.data));
  })
  .catch((error) => {
    console.log(error);
  });

Request

var request = require("request");
var fs = require("fs");
var options = {
  method: "POST",
  url: "https://imgtp.com/api/upload",
  headers: {},
  formData: {
    image: {
      value: fs.createReadStream("/C:/Users/etsuyou/Desktop/image.jpg"),
      options: {
        filename: "/C:/Users/etsuyou/Desktop/image.jpg",
        contentType: null,
      },
    },
  },
};
request(options, function (error, response) {
  if (error) throw new Error(error);
  console.log(response.body);
});

jQuery

var form = new FormData();
form.append("image", fileInput.files[0], "/C:/Users/etsuyou/Desktop/image.jpg");

var settings = {
  url: "https://imgtp.com/api/upload",
  method: "POST",
  timeout: 0,
  processData: false,
  mimeType: "multipart/form-data",
  contentType: false,
  data: form,
};

$.ajax(settings).done(function (response) {
  console.log(response);
});

Fetch

const formdata = new FormData();
formdata.append(
  "image",
  fileInput.files[0],
  "/C:/Users/etsuyou/Desktop/image.jpg"
);

const requestOptions = {
  method: "POST",
  body: formdata,
  redirect: "follow",
};

fetch("https://imgtp.com/api/upload", requestOptions)
  .then((response) => response.text())
  .then((result) => console.log(result))
  .catch((error) => console.error(error));

函数说明

`uploadImage(imagePath: string | File, uploadUrl?: string): Promise<any>`

该函数用于将本地图片上传到指定的 URL，默认上传到 ImgTP。

参数

imagePath (string | File): 本地图片路径（在 Node.js 中）或浏览器文件对象（在浏览器中）。
uploadUrl (string, 可选): 上传接口的 URL，默认为 "https://imgtp.com/api/upload"。

返回值

Promise<any>: 包含上传结果的 Promise，解析后为上传的响应数据。

示例

import { uploadImage } from "@etsuyou/upload-image";

const imagePath = "C:/Users/etsuyou/Desktop/image.jpg";

// 使用 then 方法
uploadImage(imagePath)
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

// 使用 async/await
(async () => {
  try {
    const data = await uploadImage(imagePath);
    console.log(data);
  } catch (error) {
    console.error(error);
  }
})();