Nextjs 中实现图像上传（含文件上传、Filestack）

在 Nextjs 开发中，图像上传是一个常见需求。掌握相关实现方法，能够极大提升应用的交互性与实用性。

来探讨原生的文件上传。在 Nextjs 里，利用 HTML 的 <input type="file"> 元素可以轻松实现文件选择功能。通过 onChange 事件来捕获用户选择的文件。例如：

import React, { useState } from'react';

const FileUpload = () => {
  const [selectedFile, setSelectedFile] = useState(null);

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    setSelectedFile(file);
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      {selectedFile && <p>Selected file: {selectedFile.name}</p>}
    </div>
  );
};

export default FileUpload;

当用户选择文件后，selectedFile 会存储该文件对象。之后，可以通过 FormData 将文件发送到后端服务器进行处理。

const handleSubmit = async () => {
  const formData = new FormData();
  formData.append('file', selectedFile);

  const response = await fetch('/api/upload', {
    method: 'POST',
    body: formData,
  });

  const result = await response.json();
  console.log(result);
};

而 Filestack 是一个强大的第三方文件上传解决方案，集成到 Nextjs 项目中能带来诸多便利。先安装 Filestack 的客户端库：npm install filestack-js。

引入 Filestack 并初始化：

import React from'react';
import Filestack from 'filestack-js';

const FilestackUpload = () => {
  const client = Filestack.init('YOUR_API_KEY');

  const handleUpload = () => {
    client.pick({
      accept: 'image/*',
      maxFiles: 1,
    }).then((res) => {
      console.log(res.filesUploaded[0].url);
    });
  };

  return (
    <div>
      <button onClick={handleUpload}>Upload with Filestack</button>
    </div>
  );
};

export default FilestackUpload;

在上述代码中，YOUR_API_KEY 需替换为自己在 Filestack 平台获取的 API 密钥。用户点击按钮后，会弹出 Filestack 的文件选择框，选择图像后，能在控制台看到上传后的图像链接。

无论是原生的文件上传方式，还是借助 Filestack 这样的第三方工具，在 Nextjs 中实现图像上传都有清晰的路径。开发者可依据项目需求、性能考量等因素，灵活选择合适的方案，为用户打造更优质的应用体验。