ajax、fetch上传数据

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_26983555/article/details/79370062

这个是ajax上传的：

这个是ajaxsubmit：

handleUploadForIEhack=()=>{ //IE hack
            const that = this ;
            $("#formForIE").ajaxSubmit({
                url: `/api/Info?id=${that.state.ID}`, /*设置post提交到的页面*/
                type: "POST", /*设置表单以post方法提交*/
                dataType: "json", /*设置返回值类型为文本*///text/html
                beforeSubmit: ()=>{},
                success: function (result) {
                    if( result.Code === 0 ){
                          Modal.confirm({
                            title:"上传成功！",
                            okText:"查看项目详情",
                            cancelText:"继续导入",
                            onOk:()=>{                    
                                that.props.history.push(`/home?id=${that.state.ID}`)
                            },
                            onCancel:()=>{
                                that.setState({
                                    fileList: [],
                                })
                            }
                        })
                    }else{
                        Modal.error({
                            title:'上传文件失败！(success回调返回)',
                            okText:"OK",
                            content:result.responseText
                        })
                    }
                },
                error: function (error) { 
                    Modal.error({
                        title:'上传文件失败(error回调返回)！',
                        okText:"OK",
                        content:"接受信息失败"
                    })
                },

            });
         return false;

   }

这个是fetch：

handleUpload =()=>{
        const { fileList } = this.state;

        const formData = new FormData();
        fileList.forEach((file) => {
            formData.append('fileInfo', file);
        });
        formData.append('ie', 0);
        if( this.state.projectID === null ){
             return ;
        }
        //上传文件
        fetch(`/api?id=${this.state.ID}`, {
            method: 'POST',
            credentials: 'same-origin',
            mode: 'no-cors',
            body: formData,
        }).then( (response) =>{
            if( response.status === 200){
                response.json().then(  result =>{
                    //console.log(result)
                    if( result.Code === 0 ){
                        Modal.confirm({
                            title:"上传成功！",
                            okText:"查看项目详情",
                            cancelText:"继续导入",
                            onOk:()=>{                    
                                this.props.history.push(`/home?id=${this.state.ID}`)
                            },
                            onCancel:()=>{
                                this.setState({
                                    fileList: [],
                                })
                            }
                        })
                    }else{
                        Modal.error({
                            title:'上传失败！',
                            okText:"OK",
                            content:result.Message
                        })
                    }

                 },error =>{
                    Modal.error({
                        title:'上传失败',
                        okText:"OK"
                    })
                 })
            }else{
                Modal.error({
                    title:'上传失败',
                    okText:"OK",
                    content:"未能获取响应"
                })
            }

        })

   }

这种是dva封装的fetch：


handleOk = (e) => {
e.preventDefault();
const { dispatch, form } = this.props;
const { getFieldsError, validateFields } = this.props.form;
validateFields();
if (hasErrors(getFieldsError())) {
return null;
} else {
form.validateFields((err, fieldsValue) => {
if (err) {
return null;
} else {
const values = {
...fieldsValue,
};
dispatch({
type: 'category/store',
payload: values,
});
}
});
}
};
type: ‘category/store’,中的category是数据库莫个模块的名称，store是对应的方法