React Antd Upload上传文件前弹窗询问

React Antd Upload上传文件前弹窗询问

    • 1、导入Upload组件
    • 2、使用Upload组件
    • 3、配置Upload组件

1、导入Upload组件

Import { Upload } from ‘antd’
别问react中怎么配置antd,问就是不知道,只是听说可以使用
$ npm install antd –save 或者 $ yarn add antd

2、使用Upload组件


    

Upload组件包裹着Button按钮,点检Button就可以触发文件选择框,就是下图这东西。
React Antd Upload上传文件前弹窗询问_第1张图片
props变量是用来配置Upload组件,比如上传文件要用哪个接口,上传要携带的参数之类的。
前面的三个点…,别问,问就是ES6语法中的扩展运算符,就照着antd官方文档来用吧,我也不懂。

3、配置Upload组件

const props = {
    name: 'file',    //发到后台的文件参数名,好像后端会让前端传一个参数file,用来获取文件数据,就这东西
    action: '/a/b/c/',  //上传的地址,在我眼里就是上传文件的接口
    /*设置上传的请求头部,IE10 以上有效。 
    请求需要带的鉴权信息,放在headers里,看后端怎么写吧,具体为啥的我也不懂*/
    headers: {
        Authorization: localStorage.getItem('token') || null
    },

    /*重点 重点 重点,总要的事情说三遍
    beforeUpload:上传文件之前的钩子,参数为上传的文件,若返回 false 则停止上传。
    支持返回一个 Promise 对象,Promise 对象 reject 时则停止上传,
    resolve 时开始上传( resolve 传入 File 或 Blob对象则上传 resolve 传入对象)。注意:IE9 不支持该方法。
    = = 官方人话我这个菜鸡真的看不懂。我就知道下面可以这么干*/
    
    beforeUpload: (file, fileList) => {    //选择文件后,上传文件前的操作
        return new Promise(                 //返回一个Promise对象
            function (resolve, reject) {
            
                /*应该跳出的弹窗,图在下面,因为antd的Modal.confirm自带两个按钮,对应onOk操作和onCancel操作。
                当时我想有三种情况,就在弹窗中加了个按钮*/
                
                Modal.confirm({
                    title: '是否使用损耗比',
                    content:
                
                        /*点击‘取消上传‘,触发reject(),用来取消上传,(我试了试,不加这个reject()好像也可以)
                        Modal. destroyAll()是用来注销所有弹窗的。
                        前面说了,Modal.confirm自带两个按钮,这两个按钮都会让弹窗关闭,
                        但是当时我想加入第三种情况的时候,我需要手动触发注销函数。*/
                        
                        < Button onClick={() => { reject(); Modal.destroyAll() }} > 取消上传,
                    okText: '使用',
                    cancelText: '不使用',
                    
                    /* Modal.confirm自带两个的按钮,会触发resolve(),
                    文件就能顺利上传。没有resolve()没触发,文件是不会上传的*/
                    
                    onOk: () => {
                        that.setState({ withLossRatio: 1 })
                        resolve()
                    },
                    onCancel: () => {
                        that.setState({ withLossRatio: 0 })
                        resolve()
                    }
                })
            })
    },
    
    /*上传文件改变时的状态,在上传中,上传完,上传失败时都会触发。
    主要使用上传成功的情况,毕竟传完了总要跟更新一下数据,info具体长什么样可以自行输出看看。重点不是这个*/
    
    onChange: info => {
        let that = this;
        if (info.file.status === 'done') {
            message.success('上传成功');
        } else if (info.file.status === 'error') {
            message.warn('上传失败');
        }
    }
};

你可能感兴趣的