DaZeng：自定义react Ant Design Upload 上传组件

antd官网

官网地址：https://ant.design/components/upload-cn/
今天先说这种点击拖拽的自定义使用情况吧：

点击或拖拽文件上传并传递其他参数

废话不多说直接上代码
gql:

const onImportFileChange = (info: any) => {
        const file = info.file
        const { uid, status, name } = file
        // console.log('iiiiiiiiiiiiiiiii', file, uid, status, name)

        if (status == "done") {
            setload(false)
            // info.file.response 获取上传后服务器返回的内容是错误或者成功
            const { errors, data } = info.file.response
            const error = (errors && Array.isArray(errors)) ?
                errors.map(e => e.message).join('\n') : ''
            if (error) {
                message.error(error)
                setErrMsg(error)
                seterr(true)
                setok(false)
            } else {
                seterr(false)
                setok(true)
                // console.log('res====>', data);
                let fid = data.batchOrder.uploadXLSX.id
                history.push(`/purch/table/${type}/${goodsId}/${fid}`)
            }
            
        } else {
            //导入中
            setload(true)
            setok(false)
        }

    }
return <Upload.Dragger
    accept=".xls, .xlsx" //文件类型
    action: baseClientConfig.urlPath, //服务器地址
    headers: { token } //看后台是否需要请求头自己根据需要配置
    data={{
        query: api.purch.uploadXLSX?.loc?.source.body, //对应gql的使用
        variables: JSON.stringify({file:'file',goodsId,name:exfile?.name }) //传递的参数
    }}
   showUploadList={false} //是否显示上传的列表
   beforeUpload={(file) => {
       // console.log('file', file);
       setFile(file)
       return true;  //在上传前执行的操作 true则继续执行
   }}
   onChange={onImportFileChange} //文件改变时
>
	//自定义拖拽框中内容的显示 可以分为加载中 错误 成功三种不同状态
    <div className='title'>点击或将文件拖拽到这里上传</div>
    <div className='btn-box'>
       {
            load ?
               // do your operation
                :
                err ?
                   // do your operation
                    :
                        ok ?
                           // do your operation
		}
    </div>
</Upload.Dragger>

做出来大概就是这样：

先上传文件点击之后再携带参数传递

类似于这种文件检查之后才能确定导入：

gql:

//上传
const onFinish = async (values: any) => {
    // console.log('生成', values);
    if (!exfile) {
        message.error('请上传同表格模板的文件！')
    } else {
        console.log('value------->', values);
        setbtnload(true)
        const variables = {
            goods: values.goods,
        }
        const formData = new FormData();
        formData.append('file', exfile);
        formData.append('variables', JSON.stringify(variables))
        formData.append('query', api.exManage.importSecret?.loc?.source.body!)
        // values.file = formData
        console.log('formData------------>', formData);
        const res = await service.requestFormData(formData)
       
        if (res) {
             // do your operation
        } else {
             // do your operation
        }

    }

}
const requestFormData = async (data: FormData) => {
    let res
    try {
        res = await this.requestFormDataPromise(data)
    } catch (ex) {
        showErrorMessage(ex)
    }
    return res
}
const requestFormDataPromise = (data: FormData)=> {
 return new Promise((resolve, reject) => {
     const serverURL = baseClientConfig.urlPath
     const { token } = store
     const xhr = new XMLHttpRequest()

     const successFn = (response: ProgressEvent) => {
         try {
             const d = JSON.parse(xhr.responseText)
             // console.log('d 2----------', d);
             // imgErrMsg(d,this,param)
             if (d) {
                 if (d.errors) {
                     reject(new ApolloError({ graphQLErrors: d.errors }))
                 } else {
                     resolve(d)
                 }
             } else {
                 console.log('您的网络似乎不太给力哦！');
             }
         } catch (err) {
             reject(err)
         }
     }

     const progressFn = (event: ProgressEvent) => {
         // 上传进度发生变化时调用param.progress 
     }

     const errorFn = (response: ProgressEvent) => {
         // 上传发生错误时调用param.error 
         reject(new Error('上传出错.'))
     }

     xhr.upload.addEventListener("progress", progressFn, false)
     xhr.addEventListener("load", successFn, false)
     xhr.addEventListener("error", errorFn, false)
     xhr.addEventListener("abort", errorFn, false)

     //同步上传
     xhr.open('POST', serverURL, true)
     xhr.setRequestHeader('token', token)
     xhr.send(data)

     //监听xhr没有的返回情况
     xhr.onreadystatechange = function () {
         if (xhr.status != 200) {
             reject(new Error('您的网络似乎不太给力哦！'))
         }

     }
 })
}
const onImportFileChange = (info: any) => {
      const file = info.file
      const { uid, status, name } = file
      console.log('iiiiiiiiiiiiiiiii', file, uid, status, name)

      if (status == "done") {
          const { errors, data } = info.file.response
          const error = (errors && Array.isArray(errors)) ?
              errors.map(e => e.message).join('\n') : ''
          if (error) {
              message.error(error)
              setcheckMsg(error)
              setErr(true)
              setbtnDisable(true)
          } else {
              setErr(false)
              // console.log('res====>', data);
              setcheckMsg(data.realCards.batchImportCheck.length)
              setbtnDisable(false)
          }
          setfileload(false)
      } else {
          //导入中
          setfileload(true)
      }

  }
return （
<Upload.Dragger
     accept=".xls, .xlsx"
     {...uploadProps}
     data={{
         query: api.exManage.batchImportCheck?.loc?.source.body,
         // variables: JSON.stringify({ convert: convert ?? true })
     }}
     showUploadList={false}
     beforeUpload={(file) => {
         console.log('file', file);
         setFile(file)
         return true;
     }}
     onChange={onImportFileChange}
 >
     // do your operation
 </Upload.Dragger>
）