全网react+飞冰（ice）UI框架组件实例（7）-Upload上传文件

Upload组件在项目用到多次，也用到了几种不同类型的用法，觉得在项目中也是比较常用的，在这里记录一下，希望对大家有帮助！

上传图片

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

上传文件(PDF)

<Form.Item colSpan={16} label="选择文件" required requiredMessage="请上传文件">
<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, file) => {
    setsubmitloaging(false)
    // 函数里面根据当前服务器返回的响应数据
    // 重新拼装符合组件要求的数据格式
    if (res.code !== '-1') {
      common.NoticeSuccess('标准类型', res.message)
      onCloseadd()
      props.onCloseNews(true)
      setsubmitloaging(false)
    } else {
      common.NoticeError('标准类型', res.message)
      setsubmitloaging(false)
    }
    return {
      success: res.code !== '-1',
    }
  }}
>
  <Button type="primary">选择文件</Button>
</Upload>
</Form.Item>
<Form.Item colSpan={18}>
  <Box direction="row"
    spacing={8}
    align="center"
    justify="center">
    <Form.Submit type="primary" loading={submitloaging} validate onClick={submitadd}>
      提交
    </Form.Submit>
    <Button type="secondary" onClick={onCloseadd}>
      取消
    </Button>
  </Box>
</Form.Item>

// js
const saveUploaderRef = (ref) => {
    if (ref) {
      uploaderRef = ref.getInstance();
    }
};
const afterSelect = (file) => {
    return true;
}
// 提交
const submitadd = (value, error) => {
    if (error) {
      return;
    }
      setsubmitloaging(true)
      uploaderRef.startUpload();

}

上传文件(xlsx)拖拽上传

<Form.Item colSpan={26}>
  <Upload.Dragger
    disabled={BatchAddData.deviceTheir && BatchAddData.devicecodefk && BatchAddData.dutyerfk && BatchAddData.syoufk ? false : true}
    listType="image"
    action={`接口`}
    accept=".xlsx,.xls"
    formatter={(res, file) => {
      // 函数里面根据当前服务器返回的响应数据
      // 重新拼装符合组件要求的数据格式
      if (res.id !== '-1') {
        common.NoticeSuccess('文件上传', res.message)
        (接口请求成功，要执行的方法)
      } else {
        common.NoticeError('文件上传', res.message)
      }
      return {
        success: res.id !== '-1',
      }
    }}
    onError={(res,file)=>{
      common.NoticeError('文件上传', res.response.message||'文件上传失败')
    }}
  >
    <div className="next-upload-drag">
      <p className="next-upload-drag-icon"><Icon type="upload" /></p>
      <p className="next-upload-drag-text">点击或者拖动文件到虚线框内上传</p>
      <p className="next-upload-drag-hint">支持xlsx,xls类型的文件</p>
    </div>
  </Upload.Dragger>
  
</Form.Item>