2020.11.11 横向滑动条：深入学习flex antd组件库中upload功能学习和尝试 fetch初次使用

11.11

小红点业务优化，回顾横向滑动条是如何实现的。

今天要做新的功能，做一个上传简历的功能。下午2点做完

上传文件的约束：

const uploadProps = {
        accept: '.pdf',
        showUploadList: true,
        onRemove() {
            setFile();
            return true;
        },
        beforeUpload(file) {
            if (file.size > 50 * 1024 * 1024) {
                message.warning("文件大于50MB，请重新选择");
            } else {
                setFile(file);
            }
            return false;
        },
        fileList: file ? [file] : [],
    	onChange(info){
            if(info.file.status === 'done'){
                "上传成功"
            }
        }
    };

上传文件处的模板：

<Form.Item name="resume">
	<Upload {...uploadProps}>
         <Button icon={<UploadOutlined/>} type="link">上传候选人简历</Button>
         </Upload>
</Form.Item>

上传表单到服务器：

async function onFinish({career, date, env, name}) {
        setLoading(true);
        const {letter, roomToken} = await ajax.fetchDataPost(
            api.room('create'),
            {career, env, name, time: date.valueOf()}
        );
        setLetter(letter);

        if (file) {
            console.log("file", file);
            const formData = new FormData();
            formData.append('file', file, file.name);
            await axios.put(
                api.room('resume/' + roomToken),
                formData, {timeout: 30 * 1000},
                {headers: {'Content-Type': 'multipart/form-data'}}
            );
        }
        setLoading(false);
    }

customRequest(file){
            if (file) {
                const formData = new FormData();
                formData.append('file', file, file.name);
                axios.put(
                    api.room('resume/' + roomToken),
                    formData, {timeout: 30 * 1000},
                    {headers: {'Content-Type': 'multipart/form-data'}}
                ).then(()=>{
                    console.log("上传完成");
                });
            }
        },

customRequest(file) {
            console.log("file1", file);
            if (file) {
                console.log("file2", file);
                const formData = new FormData();
                formData.append('file', file, file.name);
                axios.post(
                    api.room('resume/' + roomToken),
                    formData, {timeout: 30 * 1000},
                    {headers: {'Content-Type': 'multipart/form-data'}}
                ).then(() => {
                    console.log("上传完成");
                });
            }
        }

progress 自定义进度条样式

previewFile 自定义文件预览逻辑

name 发到后台的文件参数名

headers 设置上传的请求头部，IE10 以上有效

customRequest 通过覆盖默认的上传行为，可以自定义自己的上传实现

上传后，直接执行clickFun(file)方法，能够上传成功。

首先是file在beforeUpload中被setFile到file中。然后clickFun(file)中获取roomToken（这里是写死）然后创建formData,然后append file进去，然后axios.put上传到url为api.room('resume/' + roomToken)中，上传内容是formData，附加一个header.

onClick={clickFun(file)}这样写的

userId:1111_1
{"code":200,"userId":"1111_1","token":"sAwkpzjG7i7Wqwba1epV/FwKBWhZvsMliJJ6Padv1Ig=@2auv.cn.rongnav.com;2auv.cn.rongcfg.com"}

userId:1111_2
{"code":200,"userId":"1111_2","token":"sAwkpzjG7i6Xyd09eRaOJVwKBWhZvsMl1xEbH+BOt10=@2auv.cn.rongnav.com;2auv.cn.rongcfg.com"}