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)
}

使用场景及方式示例：

1. 默认上传接口用法（一定是后端表单接口，接收文件全链接数组时）

提交表单接口，需要分文件名、文件全链接，分别提交时用法，此处用默认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) }

2. 其他场景：需要自定义上传接口，或者赋值时后端的接口，把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
};