antd upload控件的data參數(shù)使用

更新時(shí)間：2023年02月12日 13:38:57 作者：呂剛

這篇文章主要介紹了antd upload控件的data參數(shù)使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

antd upload控件的data參數(shù)

通過(guò)data屬性傳遞的參數(shù)，在后臺(tái)可以通過(guò)request獲取到。

經(jīng)測(cè)試

data可以是一個(gè)對(duì)象或者函數(shù) ，

?<
?Upload?
?name=
?"file"?
?data=
?{this.
?state.
?ingoreFirst
?}?
?action=
?"/api/uploadFile"?
?onChange=
?{(
?info)
?=>this.
?handleUploadFileOnChange(
?info)
?}?
?>

如果是一個(gè)bool值，則request.fields獲取到空{(diào)}

這樣就可以

?<
?Upload?
?name=
?"file"?
?data=
?{this.
?state
?}?
?action=
?"/api/uploadFile"?
?onChange=
?{(
?info)
?=>this.
?handleUploadFileOnChange(
?info)
?}?
?>

如果不想把整個(gè)state返回服務(wù)器端

可以用函數(shù)

?<
?Upload?
?name=
?"file"?
?data=
?{()
?=>this.
?handleUploadData()
?}?
?action=
?"/api/uploadFile"?
?onChange=
?{(
?info)
?=>this.
?handleUploadFileOnChange(
?info)
?}?
?>

? handleUploadData()?

? ?{?
?
? let?
? d={
? ingoreFirst:
? this.
? state.
? ingoreFirst,
? ingoreLast:
? this.
? state.
? ingoreLast}?
? return?
? d;

? ?}

antd upload組件使用

項(xiàng)目場(chǎng)景

使用背景：上傳圖片給服務(wù)器并且需要額外的傳遞參數(shù)
使用antd組件庫(kù)，form表單下的upload組件

使用

圖片上傳自定義方法的使用，參數(shù)的上傳

其中customRequest 作為自定義上傳的方法與后端進(jìn)行交互并可以傳遞額外的參數(shù)

beforeUpload 方法可以對(duì)上傳的圖片類(lèi)型和大小做一下相對(duì)簡(jiǎn)單的前端校驗(yàn)

        <Upload
            name="uploadFile"
             listType="picture-card"
             className="avatar-uploader"
             showUploadList={false}
             fileList={fileList}
             customRequest={this.uploadHeadImg} //自定義上傳的方法
             beforeUpload={this.beforeUpload}
             onChange={this.handleChange}
             >
        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
      </Upload>```

    uploadHeadImg =(option) => {
    const { pageTenantId } = this.state
    const formdata= new FormData();
    formdata.append('pageTenantId',pageTenantId);
    formdata.append('uploadFileName',option.file.name);
    formdata.append('uploadFile', option.file)
    axios.post('后端提供的接口',formdata,{headers:{
        "Content-Type": "application/x-www-form-urlencoded"
    }}).then(res=>{
        if(res.data.status==0) {
            option.onSuccess(res.data.data.returnParams.fileUrl)
            this.setState({
                logoUrl: res.data.data.returnParams.fileUrl
            })
        }
    }
  )
 }

onchange方法可以通過(guò)上傳的狀態(tài)對(duì)文件進(jìn)行一些判斷

     handleChange = async(info) => {
        if (info.file.status === 'uploading') {
          this.setState({ loading: true });
          return;
        }
        if (info.file.status === 'done') {
          // Get this url from response in real world.
           await this.getBase64(info.file.originFileObj, imageUrl =>
            this.setState({
              imageUrl,
              loading: false,
              fileList:info.fileList,
            }), 
            );
        }
      };

beforeUpload的具體使用根據(jù)要求進(jìn)行判斷

    beforeUpload(file) {
        // 只允許圖片的jpeg和png類(lèi)型
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
            message.error('圖片類(lèi)型只能為JPEG/PNG!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            message.error('圖片不能大于2MB!');
        }
        return isJpgOrPng && isLt2M;
        }

在form表單中要使用getValueFromEvent對(duì)上傳的文件數(shù)據(jù)賦值具體使用

在這里插入圖片描述

normFile 方法把文件return出來(lái)

    normFile = (e) => {
        this.setState({
            uploadFileName:e.file.name
        })
        if (Array.isArray(e)) {
          return e;
        }
        return e && e.fileList;
      };