// 图片上传
async handleUpload(file) {
const formData = new FormData();
formData.append("file", file);
this.setState({
uploadLoading: true,
});
let res = await upload(formData);
return res;
}
// 提交表单
onFinish = async (values) => {
// 多个表单
const { file, file2 } = this.state; // 多个文件上传去state里面设置
// 后端返回是字符串,所以这里要判断是否需要上传
if (file && file instanceof File) {
let resUpload = await this.handleUpload(file);
if (resUpload && resUpload.code === 1) {
// 重置表单
this.setState({
fileList: [],
uploadLoading: false,
});
// 设置图片地址的值
values = {
...values,
xxx: resUpload.data.filePath, // xxx为你的图片字段
};
message.success("上传成功...");
} else {
this.setState({
uploadLoading: false,
});
message.error("上传失败...");
return false;
}
}
// 第二张图片,依次类推
if (file2 && file2 instanceof File) {
let resUpload = await this.handleUpload(file2);
if (resUpload && resUpload.code === 1) {
this.setState({
fileList2: [],
uploadLoading: false,
});
values = {
...values,
xxx2: resUpload.data.filePath,
};
message.success("上传成功...");
} else {
this.setState({
uploadLoading: false,
});
message.error("上传失败...");
return false;
}
}
// ...coding
}
render() {
const { uploadLoading, fileList, fileList2 } = this.state;
// 新页面打开图片
const open_win = (url) => {
console.log(url)
const img = new Image();
img.src = url;
const newWin = window.open("", "_blank");
newWin.document.write(img.outerHTML);
newWin.document.close();
};
let uploadProps = {
listType: "picture",
headers: {
"access-token": window.localStorage.getItem("authToken"),
},
// withCredentials:true, // 携带cookies, 看项目是否需要
fileList: [...fileList],
onRemove: (file) => {
this.setState((state) => {
const index = state.fileList.indexOf(file);
const newFileList = state.fileList.slice();
newFileList.splice(index, 1);
// 修改这里需要清空
this.formRef.current.setFieldsValue({
xxx: '' // 对应的字段
})
return {
fileList: newFileList,
};
});
},
beforeUpload: (file) => {
// 使用 beforeUpload 會失去在選擇圖片後馬上看到圖片的功能,因此利用FileReader方法來實現預覽效果
let reader = new FileReader();
console.log(file)
reader.readAsDataURL(file);
reader.onloadend = function () {
let url = reader.result;
this.setState({fileList: [{uid: file.uid, url }], file: file})
console.log(this.state.fileList);
console.log(this.state.file);
}.bind(this);
// 使用 beforeUpload 回傳 false 可以停止上傳
return false;
},
onPreview: (file) => {
// 修复点击链接跳转不正常预览问题
open_win(file.url);
},
};
let uploadProps2 = {
listType: "picture",
headers: {
"access-token": window.localStorage.getItem("authToken"),
},
fileList: [...fileList2],
multiple: false,
onRemove: (file) => {
this.setState((state) => {
const index = state.fileList2.indexOf(file);
const newFileList = state.fileList2.slice();
newFileList.splice(index, 1);
console.log(newFileList)
this.formRef.current.setFieldsValue({
xxx2: ''
})
return {
fileList2: newFileList,
};
});
},
beforeUpload: (file) => {
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function () {
let url = reader.result;
console.log(url)
this.setState({fileList2: [{uid: file.uid, url }], file2: file})
console.log(this.state.fileList2);
console.log(this.state.file2);
}.bind(this);
return false;
},
onPreview: (file) => {
open_win(file.url);
},
};
// ...coding
return (
...
<Form.Item label="xxx图片地址">
<Upload {...uploadProps} >
<Button>
<InboxOutlined /> Select File1
</Button>
</Upload>
<Form.Item name="xxx" hidden></Form.Item>
</Form.Item>
<Form.Item label="xxx2图片地址">
<Upload {...uploadProps2}>
<Button>
<InboxOutlined /> Select File2
</Button>
</Upload>
<Form.Item name="xxx2" hidden></Form.Item>
</Form.Item>
...
)
}
思考不周,欢迎补充!