Javascript 我想在前端上传之前裁剪图像（react）

这是产品表单组件，我想裁剪图像并在没有后端的情况下上载，然后将其上载到firebase存储
我想自动或手动裁剪它在恒定的纵横比，以适应卡或我想裁剪它在卡本身我试图使用反应图像裁剪，但我没有成功，它需要大量的设置，我不知道如何做

import React，{useState}来自“React”
从“../../components/Input/Input.component”导入输入
从“../../components/Button/Button.component”导入按钮
从“../../firebase”导入{db}
导入“./addproduct.styles.scss”
从“firebase”导入{storage}
从“../../components/Spinner/Spinner.component”导入微调器
const AddProduct=（{catigories}）=>{
const[name，setName]=useState（“”）
const[price，setPrice]=useState（“”）
const[catigory，setCatigory]=useState（“”）
常量[newCatigoryName，setNewCatigoryName]=useState（“”）
常量[newCatigoryImg，setNewCatigorImg]=useState（null）
常量[image，setImage]=useState（null）
常量[isSending，setIsSending]=useState（false）
console.log（图像）
const handleSubmit=async（事件）=>{
event.preventDefault（）
if（名称、价格、图像和分类）{
setIsSending（真）
if（catigory==='addNewCatigory'&&newCatigoryImg&&newCatigoryName）{
wait storage（）.ref（）.child（`catigories/${newCatigoryName}.jpg`）.put（newCatigoryImg）
const catigoryImgUrl=await storage（）.ref（）.child（`catigories/${newCatigoryName}.jpg`）getDownloadURL（）
等待db.collection（'catigories'）.doc（newCatigoryName）.set({
名称：newCatigoryName，
imgUrl:catigoryImgUrl
})
const storageId=`${name}-${price}-${catigory}`
wait storage（）.ref（）.child（`products/${storageId}.jpg`）.put（图像）
const productImgUrl=await storage（）.ref（）.child（`products/${storageId}.jpg`）.getDownloadURL（）
等待数据库集合（“产品”）。添加({
姓名:姓名,，
价格：parseInt（价格），
imgUrl:productImgUrl，
类别：newCatigoryName
})
setIsSending（假）
}否则{
const storageId=`${name}-${price}-${catigory}`
wait storage（）.ref（）.child（`products/${storageId}.jpg`）.put（图像）
const productImgUrl=await storage（）.ref（）.child（`products/${storageId}.jpg`）.getDownloadURL（）
等待数据库集合（“产品”）。添加({
姓名:姓名,，
价格：parseInt（价格），
imgUrl:productImgUrl，
分类法：分类法
})
setIsSending（假）
}
}
}
如果（正在结束）{
返回
}
返回(
event.target.files[0]？setImage（event.target.files[0]）：null}/>
setCatigory（event.target.value）}>
分类法
{catigories.map（item=>{item.name}}
其他
{catigory==='addNewCatigory'？
event.target.files[0]？setNewCatigorImg（event.target.files[0]）：null}/>
：null
}
)
}
导出默认AddProduct

您可以在选择前端图像后立即裁剪图像。对于裁剪图像，这两个模块是最好的

这些模块的集成也很简单。

我最近讨论了如何使用

查看这个完整的例子

该代码使用react image裁剪，但它与它没有任何关系，因此您可以使用所需的任何其他裁剪解决方案替换它

归结起来是：

import React，{useState，useCallback，useRef}来自“React”；
从“反应图像裁剪”导入反应裁剪；
导入“react image crop/dist/ReactCrop.css”；
从“@rpldy/Uploady”导入上载，{withRequestPreSendUpdate}；
从“@rpldy/upload button”导入上载按钮；
从“@rpldy/upload preview”导入UploadPreview；
从“/cropImage”导入cropImage；
const ItemPreviewWithCrop=withRequestPreSendUpdate（（道具）=>{
const{url，updateRequest，requestData}=props；
const[crop，setCrop]=useState（{aspect:4/3}）；
const onUploadCrop=useCallback（异步（）=>{
if（更新请求和（裁剪？高度？裁剪？宽度））{
requestData.items[0]。文件=等待cropImage（url，requestData.items[0]。文件，裁剪）；
updateRequest（{items:requestData.items}）；
}
}，[url、请求数据、更新请求、裁剪]；
返回(


上传裁剪
);
});
导出默认函数App（）{
const previewMethodsRef=useRef（）；
返回(


选择文件


);
}

import React, { useState } from 'react'
import Input from '../../components/input/input.component'
import Button from '../../components/button/button.component'
import {db} from '../../firebase'
import './addproduct.styles.scss'
import { storage } from 'firebase'
import Spinner from '../../components/spinner/spinner.component'
const AddProduct = ({catigories}) => {
    const [name,setName] = useState('')
    const [price,setPrice] = useState('')
    const [catigory,setCatigory] = useState('')
    const [newCatigoryName,setNewCatigoryName] = useState('')
    const [newCatigoryImg,setNewCatigorImg] = useState(null)
    const [image,setImage] = useState(null)
    const [isSending,setIsSending] = useState(false)
    console.log(image)
    const handleSubmit = async (event) => {
        event.preventDefault()
        if(name && price  && image && catigory){
            setIsSending(true)
            if(catigory === 'addNewCatigory' && newCatigoryImg && newCatigoryName){
                await storage().ref().child(`catigories/${newCatigoryName}.jpg`).put(newCatigoryImg)
                const catigoryImgUrl = await storage().ref().child(`catigories/${newCatigoryName}.jpg`).getDownloadURL()
                await db.collection('catigories').doc(newCatigoryName).set({
                    name:newCatigoryName,
                    imgUrl:catigoryImgUrl
                })
                const storageId = `${name}-${price}-${catigory}`
                await storage().ref().child(`products/${storageId}.jpg`).put(image)
                const productImgUrl = await storage().ref().child(`products/${storageId}.jpg`).getDownloadURL()
                await db.collection('products').add({
                    name:name,
                    price: parseInt(price),
                    imgUrl:productImgUrl,
                    catigory:newCatigoryName
                })
                setIsSending(false)
            }else{
                const storageId = `${name}-${price}-${catigory}`
                await storage().ref().child(`products/${storageId}.jpg`).put(image)
                const productImgUrl = await storage().ref().child(`products/${storageId}.jpg`).getDownloadURL()
                await db.collection('products').add({
                    name:name,
                    price: parseInt(price),
                    imgUrl:productImgUrl,
                    catigory:catigory
                })
                setIsSending(false)
            }
        }
        
    }
    if(isSending){
        return <Spinner />
    }
    return (
        <div className='product'>
            <form onSubmit={handleSubmit} className="product__form">
                <Input placeholder='Enter Product Name' value={name} setValue={setName} width='100%' fontSize='20px' height='40px' borderRadius='20px'type='text' margin />            
                <Input placeholder='Product Price' value={price} setValue={setPrice} width='100%' fontSize='20px' height='40px' borderRadius='20px'type='number' margin />            
                <input type="file" onChange={(event) => event.target.files[0] ? setImage(event.target.files[0]) :null}/> 
                <select className='product__form__select' onChange={(event) => setCatigory(event.target.value)}>
                    <option value=''>Catigories</option>
                    {catigories.map(item => <option key={item.name} value={item.name}>{item.name}</option>)}
                    <option value='addNewCatigory'>other</option>
                </select>
                {catigory === 'addNewCatigory' ? 
                    <div className='product__form__addcatigory'>
                        <Input placeholder='Catigory Name' value={newCatigoryName} setValue={setNewCatigoryName} width='100%' fontSize='20px' height='40px' borderRadius='20px'type='text' margin />
                        <input type="file" onChange={(event) => event.target.files[0] ? setNewCatigorImg(event.target.files[0]) :null}/> 
                    </div>
                    : null
                }
                <Button title='add Item' width='100px' height='40px' style={{borderRadius:'20px'}}/>
            </form>
        </div>
    )
}

export default AddProduct