如何实现输入框粘贴自动上传图片的功能

概述

要实现像 GitHub 评论输入框那样，在电脑本地复制一张图片后，在输入框粘贴，自动上传该图片至某个 HTTP 服务器并返回该图片的 URL，然后在输入框的焦点处插入该 URL，你可以按照以下步骤进行：

1. 监听粘贴事件：在输入框上监听 paste 事件。
2. 获取粘贴的图片：从 event.clipboardData 或 window.clipboardData 中获取粘贴的图片数据。
3. 上传图片：将图片数据上传至你的 HTTP 服务器。
4. 处理服务器响应：获取服务器返回的图片 URL。
5. 插入 URL：在输入框的焦点处插入该 URL。

以下是一个简单的示例代码，使用 JavaScript 和 HTML 实现上述功能：

HTML

<textarea id="comment-box" rows="4" cols="50"></textarea>

JavaScript

document.getElementById("comment-box").addEventListener("paste", function (event) {
  // 阻止默认粘贴行为
  event.preventDefault();

  // 获取粘贴的图片数据
  const items = (event.clipboardData || window.clipboardData).items;
  for (let i = 0; i < items.length; i++) {
    if (items[i].type.indexOf("image") !== -1) {
      const file = items[i].getAsFile();
      uploadImage(file);
      break;
    }
  }
});

function uploadImage(file) {
  const formData = new FormData();
  formData.append("file", file);

  // 假设你的服务器上传接口是 /upload
  fetch("/upload", {
    method: "POST",
    body: formData,
  })
    .then((response) => response.json())
    .then((data) => {
      const url = data.url; // 假设服务器返回的图片 URL 字段是 url
      insertUrlToTextarea(url);
    })
    .catch((error) => console.error("Error:", error));
}

function insertUrlToTextarea(url) {
  const textarea = document.getElementById("comment-box");
  const start = textarea.selectionStart;
  const end = textarea.selectionEnd;
  const text = textarea.value;

  // 在焦点处插入 URL
  textarea.value = text.substring(0, start) + url + text.substring(end);

  // 移动光标到 URL 后面
  textarea.selectionStart = textarea.selectionEnd = start + url.length;
}

服务器端（Node.js 示例）

假设你使用 Node.js 和 Express 来处理图片上传：

const express = require("express");
const multer = require("multer");
const fs = require("fs");
const path = require("path");

const app = express();
const upload = multer({ dest: "uploads/" });

app.post("/upload", upload.single("file"), (req, res) => {
  const tempPath = req.file.path;
  const targetPath = path.join(__dirname, "uploads", req.file.originalname);

  fs.rename(tempPath, targetPath, (err) => {
    if (err) return res.status(500).send(err);

    res.status(200).json({ url: `/uploads/${req.file.originalname}` });
  });
});

app.listen(3000, () => {
  console.log("Server started on http://localhost:3000");
});

说明

1. HTML：一个简单的文本区域（textarea）。
2. JavaScript：
   • 监听 paste 事件，获取粘贴的图片数据。
   • 使用 fetch 将图片上传至服务器。
   • 获取服务器返回的图片 URL，并在文本区域的焦点处插入该 URL。
3. 服务器端：使用 Node.js 和 Express 处理图片上传，并将图片 URL 返回给客户端。

这样，当用户在文本区域粘贴图片时，图片会自动上传至服务器，并在文本区域插入图片的 URL。