图片预览常用的两种方式_常用预览-CSDN博客

本文链接：https://blog.csdn.net/qq_40041944/article/details/111177010

本文展示了在React应用中实现图片上传并预览的两种方式：一是使用FileReader进行本地预览，将图片读取为base64显示；二是通过axios将图片上传到服务器，获取返回的图片URL进行预览。示例代码详细解释了操作过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片预览的两种方式

本地预览 FileReader

import React, { useState, useEffect } from "react";
import Cookies from "js-cookie";

import instance from "../../../../axios/index";

/**
 * 上传图片并预览的两种方式：
 * ① 本地预览 FileReader
 * ② 上传至服务器并返回图片的URL
 */

const Djradio = () => {
  const [imgSrc, setImgSrc] = useState("");

  // FileReader将传入的图片读取为base64
  const previewPicture = file => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e) {
      console.log("本地预览的base64---》🦖🦖🦖🦖", e.target.result);
      e.target.result && setImgSrc(e.target.result);
    };
  };
  const handleChange = e => {
    e.target.files[0] && previewPicture(e.target.files[0]);
  };
  return (
    <div>
      <h1> Djradio</h1>
      <input type="file" onChange={handleChange} />
      {imgSrc && (
        <img
          src={imgSrc}
          style={{ width: 100, height: 100, border: "1px solid black" }}
        />
      )}
    </div>
  );
};

export default React.memo(Djradio);

上传至服务器并返回图片的URL（常用）

import React, { useState, useEffect } from "react";
import Cookies from "js-cookie";

import instance from "../../../../axios/index";

/**
 * 上传图片并预览的两种方式：
 * ① 本地预览 FileReader
 * ② 上传至服务器并返回图片的URL
 */

const Djradio = () => {
  const [imgSrc, setImgSrc] = useState("");
  const cookieToken = Cookies.get("cookieToken");

  // 将图片上传至服务器获取URL
  const uploadPicture = async file => {
    const formData = new FormData();
    formData.append("imgFile", file);
    const res = await instance({
      method: "post",
      url: `/avatar/upload?cookie=${cookieToken}&timestamp=${Date.now()}`,
      headers: {
        "Content-Type": "multipart/form-data"
      },
      data: formData
    });
    console.log("服务器返回的url---》🦖🦖🦖🦖", res);
    res.data && res.data.url && setImgSrc(res.data.url);
  };

  const handleChange = e => {
    e.target.files[0] && uploadPicture(e.target.files[0]);
  };
  return (
    <div>
      <h1> Djradio</h1>
      <input type="file" onChange={handleChange} />
      {imgSrc && (
        <img
          src={imgSrc}
          style={{ width: 100, height: 100, border: "1px solid black" }}
        />
      )}
    </div>
  );
};

export default React.memo(Djradio);