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

1、导入Upload组件

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

2、使用Upload组件

<Upload { …props }>
    <Button>导入数据</Button>
</Upload>

Upload组件包裹着Button按钮，点检Button就可以触发文件选择框，就是下图这东西。

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() }} > 取消上传</Button >,
                    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('上传失败');
        }
    }
};