全网react+飞冰(ice)UI框架组件实例(3)-上传图片/上传文件

373 阅读1分钟

上传图片实例1(带图片下载功能)

效果图片

image.png

image.png

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

上传文件(带多个参数)

效果图片

image.png

image.png

//  方法
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>