반응으로 파일 업로드를 구현하는 방법
- 藏色散人원래의
- 2023-01-06 15:54:063487검색
반응에서 파일 업로드를 구현하는 방법: 1. 'antd'에서 { 테이블, 버튼, 모달, 양식, 입력, 업로드, 아이콘, 알림 } 가져오기를 통해 필수 antd 구성요소를 소개합니다. 2. "handleOk = e => {const { fileList } = this.state...}" 양식을 제출하고 파일을 업로드하세요.
이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.
React에서 파일을 업로드하는 방법은 무엇인가요?
react는 antd를 사용하여 수동 파일 업로드(제출 양식)를 구현합니다.
서문: 저는 현재 파일 업로드와 관련된 백그라운드 관리 프로젝트를 진행 중이며 antd에서 Upload를 사용하여 파일을 업로드합니다. 직면한 문제와 함정을 기록하십시오.
1. 얻고자 하는 효과
얻고 싶은 효과는 파일을 선택한 후 확인을 클릭하는 것입니다(즉, 양식 제출 후 업로드). 파일을 수동으로. 내 접근 방식과 내가 직면한 몇 가지 함정을 소개하겠습니다.
2. 구현 단계
1. 필수 antd 구성 요소를 소개합니다
import { Table, Button, Modal, Form, Input, Upload, Icon, notification } from 'antd';
<Modal
title="文件上传"
visible={this.state.visible}
onOk={this.handleOk} //点击按钮提价表单并上传文件
onCancel={this.handleCancel}
>
<Form layout="vertical" onSubmit={this.handleSubmit}>
<Form.Item>
<div key={Math.random()}>//点击关闭在次打开还会有上次上传文件的缓存
<Upload {...props}>
<Button type="primary">
<Icon type="upload" />选择文件
</Button>
</Upload>
</div>
</Form.Item>
<Form.Item label="文件名(可更改)">
{getFieldDecorator('filename', {
// initialValue:this.state.defEmail,
rules: [
{
message: '请输入正确的文件名',
// pattern: /^[0-9]+$/,
},
{
required: true,
message: '请输入文件名',
},
],
})(<Input />)}
</Form.Item>
<Form.Item label="描述(选填)">
{getFieldDecorator('describe', {
rules: [
{
message: '描述不能为空',
},
{
required: false,
message: '请输入描述',
},
],
})(<TextArea />)}
</Form.Item>
<Form.Item label="文件类型">
{getFieldDecorator('filetype', {
rules: [
{
message: '文件类型',
},
{
required: true,
message: '文件类型',
},
],
})(<Input disabled={true} />)}
</Form.Item>
</Form>
</Modal>다음 코드는 Upload
const props = {
showUploadList: true,
onRemove: file => {
this.setState(state => {
const index = state.fileList.indexOf(file);
const newFileList = state.fileList.slice();
newFileList.splice(index, 1);
return {
fileList: newFileList,
};
});
},
beforeUpload: file => {
console.log(file)
let { name } = file;
var fileExtension = name.substring(name.lastIndexOf('.') + 1);//截取文件后缀名
this.props.form.setFieldsValue({ 'filename': name, 'filetype': fileExtension });//选择完文件后把文件名和后缀名自动填入表单
this.setState(state => ({
fileList: [...state.fileList, file],
}));
return false;
},
fileList,
};의 props입니다. 다음은 양식 제출 및 파일 업로드에 중점을 둡니다
handleOk = e => {//点击ok确认上传
const { fileList } = this.state;
let formData = new FormData();
fileList.forEach(file => {
formData.append('file', file);
});
this.props.form.validateFields((err, values) => { //获取表单值
let { filename, filetype, describe } = values;
formData.append('name', filename);
formData.append('type', filetype);
formData.append("dir", "1");
if(describe==undefined){
formData.append('description',"");
}else{
formData.append('description',describe);
}
UploadFile(formData).then(res => { //这个是请求
if (res.status == 200 && res.data != undefined) {
notification.success({
message: "上传成功",
description: res.data,
});
} else {
notification.error({
message: "上传失败",
description: res.status,
});
}
})
this.setState({
visible: false
});
})
};Axios의 경우 게시물은 formData.append("인터페이스 매개변수 이름", "전달할 값")를 사용해야 합니다. Axios를 사용하지 않으려면 다른 요청을 사용할 수도 있습니다.
fetch(url, { //fetch请求
method: 'POST',
body: formData,
})
axios({ //axios
method: 'post',
url: url,
data: formData,
headers:{ //可加可不加
'Content-Type': 'multipart/form-data; boundary=----
WebKitFormBoundary6jwpHyBuz5iALV7b'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});수동으로 파일을 업로드할 수 있는 방법입니다.
3. 함정
처음으로 파일을 선택한 후 업로드를 클릭하세요. 두 번째로 모델을 열었을 때 지난번의 파일 목록이 그대로 남아 있는 것을 발견했습니다. 온라인에서 찾은 방법은 업로드와 키 값을 제공하는 것이었지만 확인을 클릭하고 열어야 캐시가 사라집니다. 두 번째 모델이지만 취소를 클릭하면 계속 존재합니다.
<div key={Math.random()}>
<Upload {...props}>
<Button type="primary">
<Icon type="upload" />选择文件
</Button>
</Upload>
</div>가장 좋은 방법은 this.setState를 사용하여 상태의 파일 목록을 비우는 것입니다
this.props.form.resetFields()//添加之前把input值清空
this.setState({
visible: true,
fileList: [] //把文件列表清空
});또한 Modal에 destroyOnClose 속성을 추가하여 Modal이 닫힐 때 Modal의 하위 요소를 삭제할 수도 있습니다.
권장 학습: " 리액트 영상 튜토리얼"
위 내용은 반응으로 파일 업로드를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!