上传图片实例1(带图片下载功能)
效果图片
<Form.Item colSpan={16} label="地图图片" required requiredMessage="请上传地图图片">
<Upload.Card
name="file"
listType="card"
action={`${request.baseURL}/nbsystem/map/uploadMapPicture`}
limit={1}
accept="image/png, image/jpg, image/jpeg"
formatter={(res, file) => {
// 函数里面根据当前服务器返回的响应数据
// 重新拼装符合组件要求的数据格式
if (res.code !== -1) {
common.NoticeSuccess('地图上传', "上传成功")
var addMapCopy = common.changeJson(addMap)
addMapCopy.imagepath = res.path
setaddMap(addMapCopy)
} else {
common.NoticeError('地图上传', res.message)
}
return {
success: res.code !== -1,
url: res.message,
imgURL: `${request.baseURL}/nbsystem/utils/getFile?path=/${res.path.replace(/\\/g, "/")}&fileName=地图`,
}
}}
onRemove={() => {
var addMapCopy = common.changeJson(addMap)
addMapCopy.imagepath = ""
setaddMap(addMapCopy)
}}
/>
</Form.Item>
上传文件(带多个参数)
效果图片
// 方法
const saveUploaderRef = (ref) => {
if (ref) {
uploaderRef = ref.getInstance()
}
}
const afterSelect = (file) => {
return true
}
// 提交
const submitadd = (value, error) => {
if (error) {
return
}
setsubmitloaging(true)
uploaderRef.startUpload()
}
<Form.Item colSpan={16} label="选择文件" required requiredMessage="请上传文件">
<Upload
action={request.fireCriteriaAdd}
limit={1}
autoUpload={false}
ref={saveUploaderRef}
data={() => {
var data = {
deviceTypeIdList: devList,
name: updateData.name,
code: updateData.code,
standardtype: updateData.standardtype,
issue: updateData.issue,
}
return data
}}
listType="text"
accept="application/pdf"
afterSelect={afterSelect}
formatter={(res, file) => {
setsubmitloaging(false)
// 函数里面根据当前服务器返回的响应数据
// 重新拼装符合组件要求的数据格式
if (res.id !== '-1') {
common.NoticeSuccess('消防标准', res.message)
onCloseadd()
props.onCloseNews(true)
setsubmitloaging(false)
} else {
common.NoticeError('消防标准', res.message)
setsubmitloaging(false)
}
return {
success: res.id !== '-1',
}
}}
>
<Button type="primary">选择文件</Button>
</Upload>
</Form.Item>