React Image-crop 显示错误,因为它没有以正确的形式上传图像,并且从后端收到错误

我在使用 上传裁剪后的图像时遇到错误react-image-crop。我想,我在上传之前没有正确地将 base64 转换为文件类型,或者该函数没有运行?我对 React 和 javascript 很陌生,很多事情仍然让我感到困惑。任何人都可以看一下代码并帮助解决问题吗?


我正在使用 django 休息 api。


这是该包的链接:


https://github.com/DominicTobias/react-image-crop

这是我在上传时从后端收到的错误。


{profile_pic: ["The submitted data was not a file. Check the encoding type on the form."]}

profile_pic: ["The submitted data was not a file. Check the encoding type on the form."]

这是代码。


qq_花开花谢_0
浏览 203回答 1
1回答

一只名叫tom的猫

这段代码中不需要使用useEffect和useCallback 。ReactCrop 为您提供了 onComplete,因此您唯一需要做的就是在那之后开始绘图。API错误:在上面的代码中,您将 base64 字符串发送到 api,但正如我们在错误 api 中看到的,文件格式除外。还需要将名称设置为 blob才能识别为文件。我收集了这些更改,并且此代码应该可以工作:export default function ProfilePicEdit() {&nbsp; const [upImg, setUpImg] = useState();&nbsp; const imgRef = useRef(null);&nbsp; const canvasRef = useRef(null);&nbsp; const [crop, setCrop] = useState({ unit: "%", width: 30, aspect: 1 / 1 });&nbsp; const croppedImage = useRef(null);&nbsp; const onSelectFile = (e) => {&nbsp; &nbsp; if (e.target.files && e.target.files.length > 0) {&nbsp; &nbsp; &nbsp; const reader = new FileReader();&nbsp; &nbsp; &nbsp; reader.addEventListener("load", () => setUpImg(reader.result));&nbsp; &nbsp; &nbsp; reader.readAsDataURL(e.target.files[0]);&nbsp; &nbsp; }&nbsp; };&nbsp; const onLoad = (img) => {&nbsp; &nbsp; imgRef.current = img;&nbsp; };&nbsp; const onCropComplete = (crop) => {&nbsp; &nbsp; makeClientCrop(crop);&nbsp; };&nbsp; const makeClientCrop = async (crop) => {&nbsp; &nbsp; if (imgRef.current && crop.width && crop.height) {&nbsp; &nbsp; &nbsp; croppedImage.current = await getCroppedImg(&nbsp; &nbsp; &nbsp; &nbsp; imgRef.current,&nbsp; &nbsp; &nbsp; &nbsp; crop,&nbsp; &nbsp; &nbsp; &nbsp; "newFile.jpeg"&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }&nbsp; };&nbsp; const getCroppedImg = (image, crop, fileName) => {&nbsp; &nbsp; if (!canvasRef.current || !imgRef.current) {&nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; }&nbsp; &nbsp; const canvas = canvasRef.current;&nbsp; &nbsp; const scaleX = image.naturalWidth / image.width;&nbsp; &nbsp; const scaleY = image.naturalHeight / image.height;&nbsp; &nbsp; const ctx = canvas.getContext("2d");&nbsp; &nbsp; canvas.width = crop.width * pixelRatio;&nbsp; &nbsp; canvas.height = crop.height * pixelRatio;&nbsp; &nbsp; ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);&nbsp; &nbsp; ctx.imageSmoothingQuality = "high";&nbsp; &nbsp; ctx.drawImage(&nbsp; &nbsp; &nbsp; image,&nbsp; &nbsp; &nbsp; crop.x * scaleX,&nbsp; &nbsp; &nbsp; crop.y * scaleY,&nbsp; &nbsp; &nbsp; crop.width * scaleX,&nbsp; &nbsp; &nbsp; crop.height * scaleY,&nbsp; &nbsp; &nbsp; 0,&nbsp; &nbsp; &nbsp; 0,&nbsp; &nbsp; &nbsp; crop.width,&nbsp; &nbsp; &nbsp; crop.height&nbsp; &nbsp; );&nbsp; &nbsp; return new Promise((resolve, reject) => {&nbsp; &nbsp; &nbsp; canvas.toBlob((blob) => {&nbsp; &nbsp; &nbsp; &nbsp; if (!blob) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //reject(new Error('Canvas is empty'));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.error("Canvas is empty");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; blob.name = fileName;&nbsp; &nbsp; &nbsp; &nbsp; resolve(blob);&nbsp; &nbsp; &nbsp; }, "image/jpeg");&nbsp; &nbsp; });&nbsp; };&nbsp; const onSubmit = (e) => {&nbsp; &nbsp; let formData = new FormData();&nbsp; &nbsp; formData.append("profile_pic", croppedImage.current,&nbsp; &nbsp; &nbsp; croppedImage.current.name);&nbsp; &nbsp; axiosInstance.put('api/profile/update/', formData)&nbsp; &nbsp; window.location.reload();&nbsp; };&nbsp; return (&nbsp; &nbsp; <div className="imagecropper">&nbsp; &nbsp; &nbsp; &nbsp; <form className={classes.form} noValidate onSubmit={handleSubmit(onSubmit)}>&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label htmlFor="profile-pic">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; accept="image/*"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id="profile-pic"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={onSelectFile}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="image"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="file"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="profile_pic__edit_main">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{ width: 40, height: 40 }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; src={upImg}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="profile__pic_edit"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alt=""&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <ReactCrop&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; src={upImg}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onImageLoaded={onLoad}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; crop={crop}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={(c) => setCrop(c)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onComplete={onCropComplete}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <canvas&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ref={canvasRef}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Button&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="submit"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fullWidth&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; variant="contained"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color="primary"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className={classes.submit}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Update&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Button>&nbsp; &nbsp; </form>&nbsp; &nbsp; </div>&nbsp; );}
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript