需要图像加载器
这个 neeto-image-uploader-nano 管理利多产品的资产。 纳米
出口 @bigbinary/neeto-image-uploader-frontend 国家防范机制一揽子计划
neeto-image-uploader-engine 铁路发展引擎.
目录
用主机应用程序开发
发动机
该引擎用于管理利多产品的资产.
安装
-
将此行添加到您的应用程序的 Gemfile 中 :
source "NEETO_GEM_SERVER_URL" do # ..existing gems gem 'neeto-image-uploader-engine' end -
然后执行:
bundle install -
将此行添加到您的应用程序
config/routes.rb文件 :mount NeetoImageUploaderEngine::Engine, at: "/neeto_image_uploader" -
在环境变量中添加以下密钥(需要所有6个密钥):
IMAGE_KIT_PUBLIC_KEY IMAGE_KIT_PRIVATE_KEY IMAGE_KIT_URL_ENDPOINT UNSPLASH_ACCESS_KEY #(for fetching images from unsplash)
前端软件包
安装
- 安装最新的
neeto-image-uploader-frontend使用下列软件包 命令 :yarn add @bigbinary/neeto-image-uploader-frontend
构成部分
1. 联合国. AssetLibrary (单位:千美元)源代码(中文(简体) )
道具
isOpen:一个布尔来指定模式是否打开.onClose:当模式关闭时触发回调函数.onUploadComplete: 当图像上传时触发回调函数 完成 。 .uploadConfig: 图像上传的配置对象.
使用量
import React, { useState } from "react";
import { AssetLibrary } from "@bigbinary/neeto-image-uploader-frontend";
const App = () => {
const [isAssetLibraryOpen, setIsAssetLibraryOpen] = useState(false);
const [image, setImage] = useState({ url: TEST_IMAGE_SRC, signedId: "" });
const handleUploadComplete = image => setImage(image);
return (
<AssetLibrary
isOpen={isAssetLibraryOpen}
onClose={() => setIsAssetLibraryOpen(false)}
onUploadComplete={handleUploadComplete}
/>
);
};
export default App;
2. 联合国. ImageUploader (单位:千美元)源代码(中文(简体) )
道具
onUploadComplete: 当图像上传时触发回调函数 完成 。 .className: 适用于组成部分的其他类别.src: 初始显示的图像源 URL.uploadConfig: 图像上传的配置对象.fixedAspectRatio: 保持特定侧面比的选项 图像。 预期的输入格式为{高:数,宽:数}.defaultImageSize: 设置图像初始裁剪大小的选项. 预期输入格式为{高:数,宽:数}.isOptionsDisabled: 禁用已删除的下拉选项 显示图像,或上传新图像.ref: 显示upload(file)程序启动方法 一个上传。 在组件外选择文件时有用(例如通过) 拖放画布上.
使用量
import React, { useState } from "react";
import { ImageUploader } from "@bigbinary/neeto-image-uploader-frontend";
const App = () => {
const [isAssetLibraryOpen, setIsAssetLibraryOpen] = useState(false);
const [image, setImage] = useState({ url: TEST_IMAGE_SRC, signedId: "" });
const handleUploadComplete = image => setImage(image);
return (
<ImageUploader
className="mb-8 h-52 w-80"
key={image.url}
src={image.url}
onUploadComplete={handleUploadComplete}
/>
);
};
export default App;
3个. BasicImageUploader (单位:千美元)源代码(中文(简体) )
道具
src: 初始显示的图像源 URL.className: 适用于组成部分的其他类别.imageFallbackProps: 被传递到图像与Fallback组件的道具.onDrop: 当图像被丢弃或选中时触发回调函数 上传.isDisabled: 一个布尔来指定上传器是否被禁用 .onRemove: 点击"移除"按钮时触发了回调函数.
使用量
import React, { useState } from "react";
import { noop } from "neetocist";
import { BasicImageUploader } from "@bigbinary/neeto-image-uploader-frontend";
const App = () => {
const [image, setImage] = useState({ url: TEST_IMAGE_SRC, signedId: "" });
return (
<BasicImageUploader
className="h-52 w-80"
src={image.url}
uploadProgress={0}
onDrop={noop}
onRemove={() => setImage({ url: "", signedId: "" })}
/>
);
};
export default App;
4.四. ImageForm (单位:千美元)源代码(中文(简体) )
道具
onChange: 当任何窗体字段发生变化时触发回调函数.imageUploaderProps: 需要传递到图像 Upload 的额外道具 组件.className: 适用于组成部分的其他类别.names: 为窗体集成指定字段名称的对象 :image:形式上图像字段的名称(如"properties.imageUrl")height: 表格中高度字段的名称(例如"高")alignment:格式中的对齐字段名称(如"对齐")
logoHeight: 指定标志滑动器高度限制的对象 :default: 滑动器的默认高度值( 默认值: 64)min: 滑动器最小高度值( 默认: 64)max: 滑动器的最大高度值( 默认: 100)
logoSizeVariableName: CSS 用于控制标识大小的可变名称( 需要)showAlignmentBlock:布尔以控制对齐块是否 显示( 默认: 真)showAltTextBlock:布尔以控制备选文本输入块是否 显示( 默认: 真)isLabelEnabled:布尔以控制标签是否在 图像上传块( 默认: 真)entityName: 字符串以自定义标签中使用的实体名称, 占位符和工具提示(默认:"Logo")。 这允许主机应用程序 用自定义实体名称来覆盖已编码的“ Logo” 文本.
使用量
import { Formik } from "formik";
import { ImageForm } from "@bigbinary/neeto-image-uploader-frontend";
const App = () => {
const handleUpdate = (fieldName, value) => {
console.log(`Field ${fieldName} changed to:`, value);
};
return (
<Formik
initialValues={{
properties: {
imageUrl: "",
height: 64,
alignment: "left",
},
altText: "",
}}
>
<ImageForm
className="logo-form"
imageUploaderProps={{ maxSize: 1048576 }}
names={{
image: "properties.imageUrl",
height: "height",
alignment: "alignment",
}}
logoSizeVariableName="--my-app-logo-size"
entityName="Image"
onChange={handleUpdate}
/>
</Formik>
);
};
export default App;
钩子
1. 联合国. useImageUpload (单位:千美元)源代码(中文(简体) )
- 这个
useImageUpload钩子是一个反应自定义钩子,可以简化进程 在应用程序中上传图像。 它既处理开发,又处理开发 生产情景,跟踪上传进度,并提供干净的界面 用于图像上传. - 使用情况 需要认证。 。 。 .
回返
uploadImage: 启动图像上传的函数 。 它需要两个参数:file: 要上传的图像文件 .onUploadComplete: 上传完成后调用回调函数 .
uploadProgress: 数字代表上传进度(0-100).isUploading:布尔表示上传是否在进行中.
使用量
导入钩子
import { useImageUpload } from "@bigbinary/neeto-image-uploader-frontend";
打开钩子
const { uploadImage, uploadProgress, isUploading } = useImageUpload();
调用上传图像
const handleImageUpload = async file => {
uploadImage(file, uploadedImageData => {
// Handle the uploaded image data
});
};
上传配置
"Upload Config"一节描述了默认上传配置. 这个
配置可以通过通过 uploadConfig 道具 (英语).
{
"maxImageSize": globalProps.endUserUploadedFileSizeLimitInMb,
"allowedImageTypes": {
"image/png": [".png"],
"image/jpg": [".jpg", ".jpeg"],
"image/gif": [".gif"],
"image/svg+xml": [".svg"]
}
}
示例: 覆盖上传配置 需要论坛。 。 。 .
密钥
maxImageSize: 允许上传图像的最大大小 .allowedImageTypes: 指定允许的图像类型及其 相应的文件扩展名.
出版指令
咨询 构建和释放软件包 关于如何出版的详细指南.