Upload component has been used many times in the project, and several different types of usage have also been used. I think it is quite common in the project, so I will record it here, hoping it will be helpful to everyone!

To upload pictures

< form. Item colSpan={16} label=" map "required requiredMessage=" Please Upload map "> < 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 (' map upload ', Var addMapCopy = common.changejson (addMap) addMapcopy. imagepath = res.path setaddMap(addMapCopy)} else { NoticeError(' map upload ', res.message)} return {success: res.code! == -1, url: res.message, imgURL: `${request.baseURL}/nbsystem/utils/getFile? Path = / ${res. Path. The replace (/ \ \ / g, "/")} & ` fileName = map, } }} onRemove={() => { var addMapCopy = common.changeJson(addMap) addMapCopy.imagepath = "" setaddMap(addMapCopy) }} /> </Form.Item>Copy the code

Upload file (PDF)

< form. Item colSpan={16} label=" Select file "Required requiredMessage=" Please Upload file "> <Upload action={request.baseURL+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, If (res.code!) => {setSubmitloaging (false); // If (res.code! == '-1') {common.noticesuccess (' standard type ', Res.message) onCloseadd() props. OnCloseNews (true) setSubmitloaging (false)} else {common.noticeError (' standard type ', res.message) setsubmitloaging(false) } return { success: res.code ! = = '1', < form. Item> < form. Item colSpan={18}> <Box direction="row" spacing={8} align="center" justify="center"> <Form.Submit type="primary" loading={submitloaging} validate <Button type="secondary" onClick={onCloseadd}> </Box> </ form.item >Copy the code
// js const saveUploaderRef = (ref) => { if (ref) { uploaderRef = ref.getInstance(); }}; const afterSelect = (file) => { return true; } // Submit const submitAdd = (value, error) => {if (error) {return; } setsubmitloaging(true) uploaderRef.startUpload(); }Copy the code

Upload file (XLSX) Drag upload

<Form.Item colSpan={26}> <Upload.Dragger disabled={BatchAddData.deviceTheir && BatchAddData.devicecodefk && BatchAddData.dutyerfk && BatchAddData.syoufk ? false : } listType="image" action={' interface '} Accept =".xlsx,.xls" formatter={(res, If (res.id!) => {if (res.id! == '-1') {common.noticesuccess (' file upload ', res.message) (The interface request succeeded, Method to execute)} else {common.noticeError (' file upload ', res.message)} return {success: res.id! = = '1', onError = {}}} (res, file) = > {common. NoticeError (' file upload, Res. The response. The message | | 'file upload failed')}} > < div className = "next - upload - drag" > < p className = "next - upload - drag - icon" > < icon Type ="upload" /></p> <p className="next-upload-drag-text"> Click or drag the file to the dotted box to upload </p> <p </p> </div> </ upload. Dragger> </ form. Item>Copy the code