【JS】图片裁剪上传

最新推荐文章于 2024-10-18 11:12:30 发布
最新推荐文章于 2024-10-18 11:12:30 发布
阅读量484 收藏 5
点赞数 3
分类专栏： JavaScript 文章标签： javascript 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/owo_ovo/article/details/142495870
版权

前言

流程如下：本地预览 => 裁剪 => 上传

实现

1. 本地预览

将数据读为 dataurl 赋值给 img 标签的 src

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: flex;
    }

    #image-container {
      position: relative;
      width: 400px;
      height: 400px;
      border: 1px solid #ccc;
      background-color: #f3f3f3;
    }

    #result {
      margin-left: 20px;
      border: 1px solid #ccc;
      width: 200px;
      height: 200px;
      background-color: #f3f3f3;
    }
  </style>
</head>

<body>
  <div>
    <input type="file" id="file-input">
  </div>
  <div class="container">
    <div id="image-container">
      <img id="uploaded-image" style="width: 100%; height: 100%;" />
    </div>
    <canvas id="result" width="200" height="200"></canvas> <!-- 显示裁剪结果的画布 -->
  </div>

  <script>
    const fileInput = document.getElementById('file-input');
    const uploadedImage = document.getElementById('uploaded-image');

    fileInput.onchange = (e) => {
      const file = e.target.files[0];
      const reader = new FileReader();
      reader.onload = (e) => {
        uploadedImage.src = e.target.result;
      }
      reader.readAsDataURL(file);
    }
  </script>
</body>

</html>

2. 裁剪

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片裁剪预览</title>
  <style>
    .container {
      display: flex;
    }

    #image-container {
      position: relative;
      width: 400px;
      height: 400px;
      border: 1px solid #ccc;
      background-color: #f3f3f3;
    }

    #crop-box {
      position: absolute;
      border: 2px dashed #ff0000;
      cursor: move;
      display: none;
    }

    #crop-box .resize-handle {
      position: absolute;
      width: 10px;
      height: 10px;
      background: #ff0000;
      z-index: 10;
    }

    #crop-box .top-left {
      left: -5px;
      top: -5px;
      cursor: nwse-resize;
    }

    #crop-box .top-right {
      right: -5px;
      top: -5px;
      cursor: nesw-resize;
    }

    #crop-box .bottom-left {
      left: -5px;
      bottom: -5px;
      cursor: nesw-resize;
    }

    #crop-box .bottom-right {
      right: -5px;
      bottom: -5px;
      cursor: nwse-resize;
    }

    #result {
      margin-left: 20px;
      border: 1px solid #ccc;
      width: 200px;
      height: 200px;
      background-color: #f3f3f3;
    }
  </style>
</head>

<body>

  <div>
    <input type="file" id="file-input">
  </div>
  <div class="container">
    <div id="image-container">
      <img id="uploaded-image" style="max-width: 100%; max-height: 100%; display: none;" />
      <div id="crop-box">
        <div class="resize-handle top-left"></div> <!-- 左上角调整手柄 -->
        <div class="resize-handle top-right"></div> <!-- 右上角调整手柄 -->
        <div class="resize-handle bottom-left"></div> <!-- 左下角调整手柄 -->
        <div class="resize-handle bottom-right"></div> <!-- 右下角调整手柄 -->
      </div>
    </div>
    <canvas id="result" width="200" height="200"></canvas> <!-- 显示裁剪结果的画布 -->
  </div>

  <script>
    const fileInput = document.getElementById('file-input');
    const uploadedImage = document.getElementById('uploaded-image');
    const cropBox = document.getElementById('crop-box');
    const resultCanvas = document.getElementById('result');
    const ctx = resultCanvas.getContext('2d');
    const commitBtn = document.getElementById('commit-btn');

    let image = new Image();
    let cropInfo = { x: 0, y: 0, width: 100, height: 100 }; // 裁剪框的位置和大小
    let scale = 1; // 图片缩放比例

    let isDragging = false; // 是否正在拖动裁剪框
    let isResizing = false; // 是否正在调整裁剪框大小
    let resizingHandle = null; // 当前调整手柄
    const MIN_CROP_SIZE = 20; // 裁剪框的最小尺寸

    fileInput.addEventListener('change', (event) => {
      const file = event.target.files[0];
      const reader = new FileReader();

      reader.onload = function (e) {
        image.src = e.target.result;
        uploadedImage.src = e.target.result;
        uploadedImage.style.display = 'block';
      }

      reader.readAsDataURL(file);
    });

    image.onload = function () {
      // 获取容器宽高
      const container = document.getElementById('image-container');
      const containerWidth = container.offsetWidth;
      const containerHeight = container.offsetHeight;

      scale = Math.min(containerWidth / image.width, containerHeight / image.height); // 计算缩放比例

      uploadedImage.style.width = image.width * scale + 'px'; // 根据缩放比例设置上传图片的宽度
      uploadedImage.style.height = image.height * scale + 'px'; // 根据缩放比例设置上传图片的高度

      // 重置裁剪框的位置和大小
      cropInfo = { x: 0, y: 0, width: 100, height: 100 };

      updateCropBox(); // 更新裁剪框位置和大小
      cropBox.style.display = 'block'; // 显示裁剪框

      drawCrop(); // 绘制裁剪结果
    }

    // 更新裁剪框的位置和大小
    function updateCropBox() {
      cropBox.style.left = cropInfo.x + 'px';
      cropBox.style.top = cropInfo.y + 'px';
      cropBox.style.width = cropInfo.width + 'px';
      cropBox.style.height = cropInfo.height + 'px';
    }

    // 绘制裁剪结果
    function drawCrop() {
      const cropX = cropInfo.x / scale;
      const cropY = cropInfo.y / scale;
      const cropWidth = cropInfo.width / scale;
      const cropHeight = cropInfo.height / scale;

      ctx.clearRect(0, 0, resultCanvas.width, resultCanvas.height); // 清空画布
      ctx.drawImage(image, cropX, cropY, cropWidth, cropHeight, 0, 0, resultCanvas.width, resultCanvas.height); // 绘制裁剪的图片
    }

    cropBox.addEventListener('mousedown', function (e) {
      if (e.target.classList.contains('resize-handle')) {
        // 如果按下的是调整手柄
        isResizing = true;
        resizingHandle = e.target; // 当前调整手柄
      } else {
        // 如果按下的是裁剪框，记录鼠标相对裁剪框的坐标
        isDragging = true;
        offsetX = e.offsetX;
        offsetY = e.offsetY;
      }
      document.addEventListener('mousemove', mouseMove); // 添加鼠标移动事件
      document.addEventListener('mouseup', mouseUp); // 添加鼠标抬起事件
    });

    function mouseMove(e) {
      if (isDragging) {
        // 正在拖动裁剪框，更新裁剪框坐标
        cropInfo.x = e.clientX - offsetX - image.getBoundingClientRect().left;
        cropInfo.y = e.clientY - offsetY - image.getBoundingClientRect().top;
        updateCropBox(); // 更新裁剪框
        drawCrop(); // 绘制裁剪结果
      }

      if (isResizing) {
        // 正在调整裁剪框大小
        const handleClass = resizingHandle.classList[1]; // 获取调整手柄的类名
        if (handleClass.includes('top-left')) {
          // 左上角手柄
          const newWidth = cropInfo.width + (cropInfo.x - e.clientX + image.getBoundingClientRect().left);
          const newHeight = cropInfo.height + (cropInfo.y - e.clientY + image.getBoundingClientRect().top);
          // 如果新宽高合理，则更新裁剪框位置
          if (newWidth > MIN_CROP_SIZE) {
            cropInfo.x = e.clientX - image.getBoundingClientRect().left;
            cropInfo.width = newWidth;
          }
          if (newHeight > MIN_CROP_SIZE) {
            cropInfo.y = e.clientY - image.getBoundingClientRect().top;
            cropInfo.height = newHeight;
          }
        } else if (handleClass.includes('top-right')) {
          // 右上角手柄
          const newWidth = e.clientX - cropInfo.x - image.getBoundingClientRect().left;
          const newHeight = cropInfo.height + (cropInfo.y - e.clientY + image.getBoundingClientRect().top);
          // 如果新宽高合理，则更新裁剪框位置
          if (newWidth > MIN_CROP_SIZE) {
            cropInfo.width = newWidth;
          }
          if (newHeight > MIN_CROP_SIZE) {
            cropInfo.y = e.clientY - image.getBoundingClientRect().top;
            cropInfo.height = newHeight;
          }
        } else if (handleClass.includes('bottom-left')) {
          // 左下角手柄
          const newWidth = cropInfo.width + (cropInfo.x - e.clientX + image.getBoundingClientRect().left);
          const newHeight = e.clientY - cropInfo.y - image.getBoundingClientRect().top;
          // 如果新宽高合理，则更新裁剪框位置
          if (newWidth > MIN_CROP_SIZE) {
            cropInfo.x = e.clientX - image.getBoundingClientRect().left;
            cropInfo.width = newWidth;
          }
          if (newHeight > MIN_CROP_SIZE) {
            cropInfo.height = newHeight;
          }
        } else if (handleClass.includes('bottom-right')) {
          // 右下角手柄
          const newWidth = e.clientX - cropInfo.x - image.getBoundingClientRect().left;
          const newHeight = e.clientY - cropInfo.y - image.getBoundingClientRect().top;
          // 如果新宽高合理，则更新裁剪框位置
          if (newWidth > MIN_CROP_SIZE) {
            cropInfo.width = newWidth;
          }
          if (newHeight > MIN_CROP_SIZE) {
            cropInfo.height = newHeight;
          }
        }

        updateCropBox(); // 更新裁剪框
        drawCrop(); // 绘制裁剪结果
      }
    }

    function mouseUp() {
      isDragging = false; // 停止拖动
      isResizing = false; // 停止调整大小
      document.removeEventListener('mousemove', mouseMove); // 移除鼠标移动事件
      document.removeEventListener('mouseup', mouseUp); // 移除鼠标抬起事件
    }
  </script>
</body>

</html>

3. 上传

通过 canvas 生成 blob 再变为 File

resultCanvas.toBlob((blob) => {
  const file = new File([blob], 'cut.png', { type: 'image/png' });
  console.log(file); // 执行上传逻辑即可
})

整体代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片裁剪预览</title>
  <style>
    .container {
      display: flex;
    }

    #image-container {
      position: relative;
      width: 400px;
      height: 400px;
      border: 1px solid #ccc;
      background-color: #f3f3f3;
    }

    #crop-box {
      position: absolute;
      border: 2px dashed #ff0000;
      cursor: move;
      display: none;
    }

    #crop-box .resize-handle {
      position: absolute;
      width: 10px;
      height: 10px;
      background: #ff0000;
      z-index: 10;
    }

    #crop-box .top-left {
      left: -5px;
      top: -5px;
      cursor: nwse-resize;
    }

    #crop-box .top-right {
      right: -5px;
      top: -5px;
      cursor: nesw-resize;
    }

    #crop-box .bottom-left {
      left: -5px;
      bottom: -5px;
      cursor: nesw-resize;
    }

    #crop-box .bottom-right {
      right: -5px;
      bottom: -5px;
      cursor: nwse-resize;
    }

    #result {
      margin-left: 20px;
      border: 1px solid #ccc;
      width: 200px;
      height: 200px;
      background-color: #f3f3f3;
    }

    #commit-btn {
      margin-left: 20px;
      border: 1px solid #ccc;
      width: 60px;
      height: 30px;
    }
  </style>
</head>

<body>

  <div>
    <input type="file" id="file-input">
  </div>
  <div class="container">
    <div id="image-container">
      <img id="uploaded-image" style="max-width: 100%; max-height: 100%; display: none;" />
      <div id="crop-box">
        <div class="resize-handle top-left"></div> <!-- 左上角调整手柄 -->
        <div class="resize-handle top-right"></div> <!-- 右上角调整手柄 -->
        <div class="resize-handle bottom-left"></div> <!-- 左下角调整手柄 -->
        <div class="resize-handle bottom-right"></div> <!-- 右下角调整手柄 -->
      </div>
    </div>
    <canvas id="result" width="200" height="200"></canvas> <!-- 显示裁剪结果的画布 -->
    <button id="commit-btn">上传</button>
  </div>

  <script>
    const fileInput = document.getElementById('file-input');
    const uploadedImage = document.getElementById('uploaded-image');
    const cropBox = document.getElementById('crop-box');
    const resultCanvas = document.getElementById('result');
    const ctx = resultCanvas.getContext('2d');
    const commitBtn = document.getElementById('commit-btn');

    let image = new Image();
    let cropInfo = { x: 0, y: 0, width: 100, height: 100 }; // 裁剪框的位置和大小
    let scale = 1; // 图片缩放比例

    let isDragging = false; // 是否正在拖动裁剪框
    let isResizing = false; // 是否正在调整裁剪框大小
    let resizingHandle = null; // 当前调整手柄
    const MIN_CROP_SIZE = 20; // 裁剪框的最小尺寸

    fileInput.addEventListener('change', (event) => {
      const file = event.target.files[0];
      const reader = new FileReader();

      reader.onload = function (e) {
        image.src = e.target.result;
        uploadedImage.src = e.target.result;
        uploadedImage.style.display = 'block';
      }

      reader.readAsDataURL(file);
    });

    image.onload = function () {
      // 获取容器宽高
      const container = document.getElementById('image-container');
      const containerWidth = container.offsetWidth;
      const containerHeight = container.offsetHeight;

      scale = Math.min(containerWidth / image.width, containerHeight / image.height); // 计算缩放比例

      uploadedImage.style.width = image.width * scale + 'px'; // 根据缩放比例设置上传图片的宽度
      uploadedImage.style.height = image.height * scale + 'px'; // 根据缩放比例设置上传图片的高度

      // 重置裁剪框的位置和大小
      cropInfo = { x: 0, y: 0, width: 100, height: 100 };

      updateCropBox(); // 更新裁剪框位置和大小
      cropBox.style.display = 'block'; // 显示裁剪框

      drawCrop(); // 绘制裁剪结果
    }

    // 更新裁剪框的位置和大小
    function updateCropBox() {
      cropBox.style.left = cropInfo.x + 'px';
      cropBox.style.top = cropInfo.y + 'px';
      cropBox.style.width = cropInfo.width + 'px';
      cropBox.style.height = cropInfo.height + 'px';
    }

    // 绘制裁剪结果
    function drawCrop() {
      const cropX = cropInfo.x / scale;
      const cropY = cropInfo.y / scale;
      const cropWidth = cropInfo.width / scale;
      const cropHeight = cropInfo.height / scale;

      ctx.clearRect(0, 0, resultCanvas.width, resultCanvas.height); // 清空画布
      ctx.drawImage(image, cropX, cropY, cropWidth, cropHeight, 0, 0, resultCanvas.width, resultCanvas.height); // 绘制裁剪的图片
    }

    cropBox.addEventListener('mousedown', function (e) {
      if (e.target.classList.contains('resize-handle')) {
        // 如果按下的是调整手柄
        isResizing = true;
        resizingHandle = e.target; // 当前调整手柄
      } else {
        // 如果按下的是裁剪框，记录鼠标相对裁剪框的坐标
        isDragging = true;
        offsetX = e.offsetX;
        offsetY = e.offsetY;
      }
      document.addEventListener('mousemove', mouseMove); // 添加鼠标移动事件
      document.addEventListener('mouseup', mouseUp); // 添加鼠标抬起事件
    });

    function mouseMove(e) {
      if (isDragging) {
        // 正在拖动裁剪框，更新裁剪框坐标
        cropInfo.x = e.clientX - offsetX - image.getBoundingClientRect().left;
        cropInfo.y = e.clientY - offsetY - image.getBoundingClientRect().top;
        updateCropBox(); // 更新裁剪框
        drawCrop(); // 绘制裁剪结果
      }

      if (isResizing) {
        // 正在调整裁剪框大小
        const handleClass = resizingHandle.classList[1]; // 获取调整手柄的类名
        if (handleClass.includes('top-left')) {
          // 左上角手柄
          const newWidth = cropInfo.width + (cropInfo.x - e.clientX + image.getBoundingClientRect().left);
          const newHeight = cropInfo.height + (cropInfo.y - e.clientY + image.getBoundingClientRect().top);
          // 如果新宽高合理，则更新裁剪框位置
          if (newWidth > MIN_CROP_SIZE) {
            cropInfo.x = e.clientX - image.getBoundingClientRect().left;
            cropInfo.width = newWidth;
          }
          if (newHeight > MIN_CROP_SIZE) {
            cropInfo.y = e.clientY - image.getBoundingClientRect().top;
            cropInfo.height = newHeight;
          }
        } else if (handleClass.includes('top-right')) {
          // 右上角手柄
          const newWidth = e.clientX - cropInfo.x - image.getBoundingClientRect().left;
          const newHeight = cropInfo.height + (cropInfo.y - e.clientY + image.getBoundingClientRect().top);
          // 如果新宽高合理，则更新裁剪框位置
          if (newWidth > MIN_CROP_SIZE) {
            cropInfo.width = newWidth;
          }
          if (newHeight > MIN_CROP_SIZE) {
            cropInfo.y = e.clientY - image.getBoundingClientRect().top;
            cropInfo.height = newHeight;
          }
        } else if (handleClass.includes('bottom-left')) {
          // 左下角手柄
          const newWidth = cropInfo.width + (cropInfo.x - e.clientX + image.getBoundingClientRect().left);
          const newHeight = e.clientY - cropInfo.y - image.getBoundingClientRect().top;
          // 如果新宽高合理，则更新裁剪框位置
          if (newWidth > MIN_CROP_SIZE) {
            cropInfo.x = e.clientX - image.getBoundingClientRect().left;
            cropInfo.width = newWidth;
          }
          if (newHeight > MIN_CROP_SIZE) {
            cropInfo.height = newHeight;
          }
        } else if (handleClass.includes('bottom-right')) {
          // 右下角手柄
          const newWidth = e.clientX - cropInfo.x - image.getBoundingClientRect().left;
          const newHeight = e.clientY - cropInfo.y - image.getBoundingClientRect().top;
          // 如果新宽高合理，则更新裁剪框位置
          if (newWidth > MIN_CROP_SIZE) {
            cropInfo.width = newWidth;
          }
          if (newHeight > MIN_CROP_SIZE) {
            cropInfo.height = newHeight;
          }
        }

        updateCropBox(); // 更新裁剪框
        drawCrop(); // 绘制裁剪结果
      }
    }

    function mouseUp() {
      isDragging = false; // 停止拖动
      isResizing = false; // 停止调整大小
      document.removeEventListener('mousemove', mouseMove); // 移除鼠标移动事件
      document.removeEventListener('mouseup', mouseUp); // 移除鼠标抬起事件
    }

    commitBtn.addEventListener('click', function () {
      resultCanvas.toBlob((blob) => {
        const file = new File([blob], 'cut.png', { type: 'image/png' });
        console.log(file); // 执行上传逻辑即可
      })
    })
  </script>
</body>

</html>

在这里插入图片描述

田本初
关注
专栏目录
js原生上传图片、裁剪
小诏
03-13 339
【代码】js原生上传图片、裁剪。
vue3+js如何将图片的url链接转换成file对象
weixin_69924839的博客
09-23 182
说明：imgUrlPath为存储图片url的变量。如果大佬有话要说，欢迎评论区留言哦～话不多说，几行代码就可以搞定～
前端 JS 经典：图片裁剪上传原理
weixin_64684095的博客
06-06 496
图片裁剪一般都是用户选择头像得时候用到，现在很多插件都可以满足这个功能，但是我们不仅要会用插件，还要自己懂的裁剪原理。
原生JS实现图片裁剪功能
pany的博客
06-25 2458
功能介绍：图片通过原生input上传，使用canvas进行图片裁剪。 裁剪框限制不允许超出图片范围，图片限制了最大宽高（自行修改要的尺寸），点击确认获取新的base64图片数据 效果图： 上代码
（纯JS）图片裁剪
marst437730201的博客
09-03 1044
离线网页实现图片裁剪功能具有独立性、可用性、数据安全、性能优势和定制性等优点，为用户提供了更加便捷、高效和安全的图片处理方式。
html上传图片裁剪,基于HTML5+JS实现本地图片裁剪并上传功能
weixin_26997697的博客
06-04 563
基于HTML5+JS实现本地图片裁剪并上传功能2019-01-07编程之家https://www.jb51.cc编程之家收集整理的这篇文章主要介绍了基于HTML5+JS实现本地图片裁剪并上传功能，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。最近做了一个项目，这个项目中需要实现的一个功能是：用户自定义头像(用户在本地选择一张图片，在本地将图片裁剪成满足系统要求尺寸的大小)。这个功能的...
Antd - 上传图片 & 裁剪图片
qq_45829293的博客
06-19 1032
首先取消默认上传时的接口，在beforeUpload方法return false，来阻止默认上传。即【Upload上传有个action的坑，就是你选择文件之后自动调用地址然后就会执行上传接口，如果不取消会一直有一个失败请求，但不影响主体流程】上传前文件格式校验在上传文件校验或onchange方法中获取上传的文件，进行自定义接口请求传递});if (!message.error('请上传png、jpeg、jpg、webp格式图片');isLt2M) {
js canvas做图片裁剪处理
牛马程序员进阶之路
08-23 1001
js canvas做图片裁剪处理
js canvas实现裁剪图片并下载
咕咕酱没有悲伤的博客
04-14 1727
简历上给自己挖的坑，面试被拷打，早就该填了T.T 参考：【js canvas实现图片裁剪】 https://www.bilibili.com/video/BV1QK411d7n1/?share_source=copy_web&vd_source=bf743b20b76eab11028ba2fb05f056b4 注释写得very详细了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-
基于原生JS实现图片裁剪
10-21
基于原生JS实现图片裁剪是一种常见的前端图像处理技术，它涉及到JavaScript的事件处理、DOM操作以及坐标计算等多个方面。主要分为两个步骤：前端的裁剪区域选择和后台的处理。前端部分主要利用JavaScript监听鼠标...
js图片裁剪上传-拖动、放大缩小
11-29
可用于头像等的图片上传处理，打开图片文件后，支持图片的拖动、图片放大和缩小；可获取到base64资源，也可以上传到自己服务器获取普通图片地址。 本资源经过本人测试、改进，没有做进一部的封装。可直接使用，如有...
H5实现读取图片裁剪及上传功能
06-16
接下来，我们需要实现图片裁剪功能。这通常通过JavaScript库如Cropper.js或者JQuery Cropper来完成。这两个库提供了强大的图像裁剪功能，可以设置裁剪区域的大小、比例等。例如，使用Cropper.js： ```html ``` ``...
js图片裁剪
01-10
需要注意的是，为了保证兼容性和性能，我们通常会采用一些成熟的JavaScript图片裁剪库，如Cropper.js、Jcrop等。这些库已经封装好了大部分操作，如图片加载、裁剪区域控制、预览效果生成等功能，开发者只需要配置...
bootstrap+cropper图片裁剪代码
03-16
Cropper.js 是一个轻量级的 JavaScript 图片裁剪库，专门用于处理图像的裁剪和旋转操作。它支持触控设备，并且提供了丰富的 API 和可定制的选项，可以满足多种裁剪需求。Cropper.js 可以与任何前端框架或库结合，...
JS-常用功能
最新发布
qq_40950398的博客
10-18 202
汇总一些常用的js功能
ECMAScript标准解析及其发展历史与技术演进
qq_20245171的博客
10-15 764
ECMAScript（简称ES）是由ECMA国际（欧洲计算机制造商协会）制定的一种脚本语言规范。它是JavaScript、JScript等语言的基础，并为现代Web开发提供了强大的支持。ECMAScript标准不仅定义了语言的语法和语义，还涵盖了数据类型、对象模型和执行环境等内容，极大推动了JavaScript语言的发展。本文将全面介绍ECMAScript标准的起源、各个版本的演变、关键特性以及未来趋势，深入探讨其对Web开发及编程语言设计的影响。
深入解析：React中的信号组件与细粒度更新
Fisher的专栏
10-15 771
介绍了前端大火的signal原理，引入AutoStore为React提供了信号组件，帮助实现细粒度更新
基于Java微信小程序的水果销售系统详细设计和实现(源码+lw+部署文档+讲解等)
源码好优多
10-16 878
请联系我获取更详细的演示视频。
React入门 9：React Router
pingguocu3的博客
10-13 583
路由routing）就是通过互联的网络把信息从源地址传输到目的地址的活动。以上是中文维基百科对路由的解释。通俗的来讲，把一个地方的信息传输到他想去的目的地的过程，就叫路由。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

田本初

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值