antd upload控件的data参数使用

 更新时间:2023年02月12日 13:38:57   作者:吕刚  
这篇文章主要介绍了antd upload控件的data参数使用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

antd upload控件的data参数

通过data属性传递的参数,在后台可以通过request获取到。

经测试

data可以是一个对象或者函数 ,

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

如果是一个bool值,则request.fields获取到空{}

这样就可以

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

如果不想把整个state返回服务器端

可以用函数

 <
 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组件使用

项目场景

  • 使用背景:上传图片给服务器并且需要额外的传递参数
  • 使用antd组件库,form表单下的upload组件

使用

图片上传自定义方法的使用,参数的上传

其中customRequest 作为自定义上传的方法与后端进行交互并可以传递额外的参数

beforeUpload 方法可以对上传的图片类型和大小做一下相对简单的前端校验

        <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方法可以通过上传的状态对文件进行一些判断

     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的具体使用根据要求进行判断

    beforeUpload(file) {
        // 只允许图片的jpeg和png类型
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
            message.error('图片类型只能为JPEG/PNG!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            message.error('图片不能大于2MB!');
        }
        return isJpgOrPng && isLt2M;
        }

在form表单中要使用getValueFromEvent对上传的文件数据赋值具体使用

在这里插入图片描述

normFile 方法把文件return出来

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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 简单实现js倒计时功能

    简单实现js倒计时功能

    这篇文章主要为大家详细介绍了js倒计时效果的实现代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • js前端实现多图图片上传预览的两个方法(推荐)

    js前端实现多图图片上传预览的两个方法(推荐)

    下面小编就为大家带来一篇js前端实现多图图片上传预览的两个方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 用Webpack构建Vue项目的实践

    用Webpack构建Vue项目的实践

    这篇文章主要介绍了用Webpack构建Vue项目的实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • js字符串中空格和换行符(\r,\s,\n,\r\n)浅析

    js字符串中空格和换行符(\r,\s,\n,\r\n)浅析

    我们在使用字符串时经常会遇到换行问题,下面这篇文章主要给大家介绍了关于js字符串中空格和换行符(\r,\s,\n,\r\n)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • 深入理解Ajax的get和post请求

    深入理解Ajax的get和post请求

    下面小编就为大家带来一篇深入理解Ajax的get和post请求。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • JavaScript制作颜色反转小游戏

    JavaScript制作颜色反转小游戏

    本文给大家分享的是一个JavaScript实现的颜色反转的小游戏的源码,非常的简单好玩,有需要的小伙伴可以参考下
    2016-09-09
  • Bootstrap modal只加载一次数据的解决办法(推荐)

    Bootstrap modal只加载一次数据的解决办法(推荐)

    这篇文章主要介绍了Bootstrap modal只加载一次数据的解决办法,以及bootstrap模态框的简单使用,需要的朋友可以参考下
    2017-11-11
  • JS实现iframe自适应高度的方法(兼容IE与FireFox)

    JS实现iframe自适应高度的方法(兼容IE与FireFox)

    这篇文章主要介绍了JS实现iframe自适应高度的方法,涉及javascript与iframe交互动态操作页面元素属性的相关技巧,需要的朋友可以参考下
    2016-06-06
  • 前端使用xlsx导出数据生成Excel文件的全过程

    前端使用xlsx导出数据生成Excel文件的全过程

    这篇文章主要给大家介绍了关于前端使用xlsx导出数据生成Excel文件的相关资料,最近在做项目中,后端偷懒不做导出功能,让我前端实现,所以在这里记录下前端导出功能,需要的朋友可以参考下
    2023-08-08
  • JS也玩OO继承

    JS也玩OO继承

    JS也玩OO继承...
    2007-01-01

最新评论