如何从React JS上传图片到Json-server？_如何从React上传图片/媒体文件到Django API？_js上传图片到本地 - 腾讯云开发者社区

如何从React JS上传图片到Json-server？

要从React JS上传图片到Json-server，你需要完成以下几个步骤：

基础概念

React JS: 一个用于构建用户界面的JavaScript库。
Json-server: 一个用于快速搭建REST API的工具，可以用内存中的JSON文件模拟数据库。
文件上传: 将文件从客户端传输到服务器的过程。

类型

前端: React JS
后端: Json-server

应用场景

开发过程中快速搭建和测试API。
小型项目或原型开发。

实现步骤

1. 设置Json-server

首先，确保你已经安装了json-server。如果没有安装，可以使用以下命令进行安装：

npm install -g json-server

然后，创建一个db.json文件来模拟数据库：

{
  "images": []
}

启动Json-server：

json-server --watch db.json --port 5000

2. 设置React JS项目

确保你已经创建了一个React项目。如果没有，可以使用以下命令创建：

npx create-react-app my-app
cd my-app

3. 创建上传组件

在React项目中创建一个上传图片的组件。假设我们创建一个名为ImageUpload.js的文件：

import React, { useState } from 'react';

const ImageUpload = () => {
  const [file, setFile] = useState(null);
  const [message, setMessage] = useState('');

  const handleFileChange = (event) => {
    setFile(event.target.files[0]);
  };

  const handleUpload = async () => {
    if (!file) {
      setMessage('Please select a file');
      return;
    }

    const formData = new FormData();
    formData.append('image', file);

    try {
      const response = await fetch('http://localhost:5000/images', {
        method: 'POST',
        body: formData,
      });

      if (response.ok) {
        setMessage('File uploaded successfully');
      } else {
        setMessage('Failed to upload file');
      }
    } catch (error) {
      setMessage('Error uploading file');
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload}>Upload</button>
      {message && <p>{message}</p>}
    </div>
  );
};

export default ImageUpload;

4. 配置Json-server以处理文件上传

默认情况下，Json-server不支持文件上传。你需要使用中间件来处理文件上传。可以使用multer和express来实现这一点。

首先，安装所需的依赖：

npm install express multer

然后，创建一个server.js文件：

const express = require('express');
const multer = require('multer');
const jsonServer = require('json-server');
const server = express();
const router = jsonServer.router('db.json');
const middlewares = jsonServer.defaults();

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/');
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + '-' + file.originalname);
  },
});

const upload = multer({ storage });

server.use(middlewares);
server.use('/images', upload.single('image'), router);

server.listen(5000, () => {
  console.log('JSON Server is running');
});

确保你有一个uploads文件夹来存储上传的文件。