1.0.6 • Published 3 years ago
upload-base-on-react-antd v1.0.6
Upload 组件介绍
示例:配合Ant Form表单使用
安装
yarn add @yuanzhi/upload
npm install @yuanzhi/upload
引入:
import Upload, { FileProps } from "@yuanzhi/upload";
赋值显示(不是回显,回显本地文件信息):
/* 方式一场景:
1. 显示时,后端分开返回oss域名 + 图片文件名(一般统一这种方式)
2. 上传时,需对接的上传API,只保存图片文件名,需要连同用户修改时的保留项回传
*/
form.setFieldsValue({
formImgs: pic ? pic.split(",").map((v: string) => ({ imageUrl: ossUrl + v, uploadPicString: v })) : []
)}
/* 方式二场景:
1. 显示时,后端返回完整图片url 如:pic: "http://1.png, http://2.png"
2. 上传时,需对接的上传API,保存所有图片的完整url,需要连同用户修改时的保留项回传
*/
form.setFieldsValue({
formImgs: pic ? pic.split(",").map((v: string) => ({ uploadPicString: v })) : []
)}
使用:
注意:直接从npm安装该,组件,不能使用默认模式,元知企业项目的开发者,需要使用默认模式,通过components/upload/new 引入 UploadUni 使用
<Form.Item
name="formImgs"
label="添加照片"
labelCol={{ span: 4 }}
rules={[
{
required: true,
message: "请上传主图",
},
]}
>
<Upload mode="image" filePath="" uploadApi="" />
</Form.Item>
上传:
注意:表单提交时,为保证出入参完整性,组件回传的value类型为:FileProps[],一般提交表单是只需要用到其中的 uploadPicString 即可,其他参数可忽略
// ant form 提交,通过校验,取值
const values = await form.validateFields();
const otherValuesOfThisFrom = {
xxx: values.xxx,
xxx: values.xxx,
xxx: values.xxx,
xxx: values.xxx,
}
const submitFormRequirdBody = {
...otherValuesOfThisFrom,
// 此处示例上传为逗号隔开字符串: pic: "img1, img2(可能是123.png, 也可能是http://123.png)",如果是数组,自行处理
pic: values.formImgs.map((v: FileProps) => v.uploadPicString).join(",")
}
// ...
try {
const submitRes = await submitApi(submitFormRequirdBody);
} catch(err) {
console.log(err)
}
使用场景及方式示例:
- 默认上传接口用法(一定是后端表单接口,接收文件全链接数组时)
提交表单接口,需要分文件名、文件全链接,分别提交时用法,此处用默认api
// 查看赋值时
form.setFieldsValue({
formImgs: pic ? pic.split(",").map((v: string) => ({ uploadPicString: v })) : []
)}
// 用法 (不传uploadApi情况下,filePath请询问后端,不传默认是yzt-oms)
<Form.Item name="formFiles" label="上传附件" labelCol={{ span: 6 }}>
<Upload mode="file" filePath="xxx"></Upload>
</Form.Item>
// 上传完会返回的完整文件数组结构
const value = {
imageUrl: a, // 本地base64Code文件编码
uploadPicString, // 会返回完整URL链接
originFile: file, // 上传的文件对象
fileName: file.name, // 显示文件名
resData: res.data // 接口返回的数据结构
}[]
// 次案例中的表单提交数据格式为 'https://x/x/x/xxx1.png,https://x/x/x/xxx2.png...'
const reqBody = {
...otherReqBody,
attachmentName: values.formFiles.map((v: FileProps) => v.fileName).join(","),
attachmentUrl: values.formFiles.map((v: FileProps) => v.uploadPicString).join(",")
}
try{ const res = await xxxupdate(reqBody); console.log(res) } catch { console.log(error) }
- 其他场景:需要自定义上传接口,或者赋值时后端的接口,把ossUrl和文件名分开给你,并且交表单时,要求你只提交文件名数组时,如下图
// 查看赋值时 (由于提交表单接口,只保存文件名,回显时,要传入imageUrl, 用于显示图片
form.setFieldsValue({
formImgs: pic ? pic.split(",").map((v: string) => ({ imageUrl: ossUrl + v, uploadPicString: v })) : []
)}
// 用法:上传接口有其他参数是可通过reqBody传入,不传的话默认是直接传入file
<Form.Item name="formFiles" label="上传附件" labelCol={{ span: 6 }}>
<Upload mode="file" uploadApi="dispatch.common.upLoadFile" reqBody={reqBody}></Upload>
</Form.Item>
// 上传完会返回的完整文件数组结构
const value = {
imageUrl: a, // 本地base64Code文件编码
uploadPicString, // 会返回完整URL链接
originFile: file, // 上传的文件对象
fileName: file.name, // 显示文件名
resData: res.data // 接口返回的数据结构
}[]
// 次案例中的表单 接收的文件数据格式为 'xxx1.png,xxx2.png...'
const reqBody = {
...otherReqBody,
pic: values.formFiles.map((v: FileProps) => v.uploadPicString).join(",")
}
try{ const res = await xxxupdate(reqBody); console.log(res) } catch { console.log(error) }
Props说明:
// value复制数组types
export type FileProps = {
imageUrl?: string; // 需要显示的图片路径
uploadPicString: string; // 图片文件名 \ 链接
originFile?: File; // 二进制文件blob
fileName?: string; // 文件名
resData?: any; // 接口返回的原始数据
};
export type FileListProps = FileProps[];
export type Props = {
uploadApi?: (data: any) => Promise<Res>; // 上传接口
filePath?: string; // 使用默认上传接口(不传uploadApi)时使用,需要向后端沟通filePath,不传默认yzt-oms
value?: FileListProps; // 初始值
reqBody?: any; // 上传参数
onChange?: (info: FileListProps) => void; // 修改
mode?: "file" | "image"; // 上传类型 图片 or 文件 默认图片
isPreview?: boolean; // 是否预览图片 默认预览
maxCount?: number | 9; // 最大上传图片数,默认9图
buttonTitle?: string | "点击上传"; // 按钮title
};
1.0.6
3 years ago