antd的upload本地开发环境正常但部署后产生bug的原因
今天遇到一个特殊情况,本地调开发环境代码没有任何问题一切正常,部署后却产生表单报错,点击提交无法调用接口的问题。
排查后发现问题出现在上传文件时提交的数据,在第25行,当时图省事使用JSON.stringfy()对整个数据进行一个字符串的处理,本地一切正常部署后报错,之后采用拼串及join自己组装拼串上传,解决问题
1 const handleSubmit = () => { 2 form 3 .validateFields() 4 .then(async (val) => { 5 let arr = []; 6 let uploadArr = []; 7 let uploadContentArray = []; 8 //遍历得到所有涉及到DatePicker时间框的对象的Id 9 taskExecuteData.inputOutPutDTO.buOutputDetailDTOList.forEach((obj) => { 10 if (obj.output_form === '40') { 11 arr.push(obj.inoutlistId); 12 } else if (obj.output_form === '30') { 13 uploadArr.push(obj.inoutlistId); 14 } 15 }); 16 17 // 针对提交的value中涉及到DatePicker的时间数据进行格式处理 -> 'YYYY-MM-DD' 18 Object.keys(val).map((item) => { 19 // arr.indexOf(item) !== -1 ? (val[item] = format(val[item])) : null 20 arr.indexOf(item) !== -1 21 ? format(val[item]) === 'Invalid date' 22 ? (val[item] = '') 23 : (val[item] = format(val[item])) 24 : null; 25 uploadArr.indexOf(item) !== -1 26 ? (val[item].forEach((obj) => { 27 // 如若有上传文件框,则向 uploadContentArray 数组中拼串,将所需内容塞入 28 uploadContentArray.push( 29 `filename=${obj.response.data.filename}&size=${obj.response.data.size}&url=${obj.response.data.url}` 30 ); 31 }), 32 // console.log('val[item]', val[item]), 33 // console.log('uploadContentArray', uploadContentArray), 34 // 对 val[item] 赋值,若只上传一个文件则取数组第一项,否则使用 join 语法拼串 35 (val[item] = 36 uploadContentArray.length === 0 37 ? uploadContentArray[0] 38 : uploadContentArray.join('||'))) 39 : ''; 40 }); 41 42 val.isSwitch = val.isSwitch === undefined ? true : val.isSwitch; // 针对switch未操作直接提交时 isSwitch 为undefined 的情况做处理 43 44 console.log('val', val); 45 46 let submitData1 = []; 47 48 let taskId = taskExecuteData.basicTaskInfo.taskId; 49 console.log('taskId', taskId); 50 51 //如果不涉及 52 if (!isInvolve) { 53 taskExecuteData.inputOutPutDTO.buOutputDetailDTOList.forEach((obj) => { 54 submitData1.push({ 55 content: '', 56 taskId: taskId, 57 isInvolve: false, 58 outputDetailId: obj.inoutlistId, 59 outputType: obj.output_form, 60 taskComments: val.suggestion === undefined ? '' : val.suggestion, 61 }); 62 }); 63 } 64 65 //涉及,正常取值逻辑运算 66 Object.keys(val).forEach((el) => { 67 if (el !== 'isSwitch' && el !== 'suggestion') { 68 submitData1.push({ 69 content: val[el], 70 taskId: taskId, 71 isInvolve: val.isSwitch === undefined ? true : val.isSwitch, 72 outputDetailId: el, 73 outputType: taskExecuteData.inputOutPutDTO.buOutputDetailDTOList.find( 74 (item) => item.inoutlistId === el 75 ).output_form, 76 taskComments: val.suggestion === undefined ? '' : val.suggestion, 77 }); 78 } 79 }); 80 console.log('submitData1', submitData1); 81 82 console.log('submit', { ...taskExecuteData, changeUserTaskExecuteDTOList: submitData1 }); 83 84 toExecuteTask({ 85 ...taskExecuteData, 86 changeUserTaskExecuteDTOList: submitData1, 87 }) 88 .then((result) => { 89 if (result.code === 200) { 90 setShowLoading(false); 91 message.success('提交成功'); 92 form.resetFields(); 93 onCloseDrawer(true); 94 } 95 }) 96 .catch(() => { 97 setShowLoading(false); 98 }); 99 }) 100 .catch((e) => { 101 console.log('e', e); 102 message.warning('仍有选项未填完,请补充完整'); 103 }); 104 };