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/[email protected];2auv.cn.rongcfg.com"}

userId:1111_2
{"code":200,"userId":"1111_2","token":"[email protected];2auv.cn.rongcfg.com"}