jdf2e / nutui-react

京东风格的移动端 React 组件库 、支持多端小程序(A React UI Toolkit for Mobile Web)
https://nutui.jd.com/react/
920 stars 263 forks source link

formitem uploader没法上传文件 #2034

Open sailei1 opened 8 months ago

sailei1 commented 8 months ago

NutUI React 包名

@nutui/nutui-react

NutUI React 版本号

2.3.10

平台

weapp

重现链接

小程序里面报错

重现步骤

import React, {useEffect, useRef, useState} from "react";
import { Uploader,  Button, Progress,Form } from '@nutui/nutui-react-taro';
// import Upload from "./custom/Upload";

const SingleUpload = (props) => {
    const {setting,id}=props.config

    const uploadUrl = 'https://localhost:8080/upload/file'
    const [progressPercent, setProgressPercent] = useState(0)
    const onProgress = ({event, options, percentage}) => {
        setProgressPercent(percentage)
    }
    const [val, setVal] = useState([
            {
                name: 'file1.png',
                url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
                status: 'success',
                message: 'success',
                type: 'image',
                uid: '122',
            },
      ])

    useEffect(()=>{
        setVal(props.config.val)
    },[])

    const rules=()=>{
        let arr=[];
        if(setting.isRequired){
            arr.push({required: true,message:setting.errorMsg||`请选择${setting.title}`})
        }
        return arr;
    }
    const uploadRef=useRef();

    const onChange=(e)=>{
         debugger
        e.fileList=val;
    }

    return (
        <Form.Item label={setting.title} name={id} initialValue={val}  rules={rules()}>

            <Uploader
                url="http://localhost:8080/upload/file" name="file" value={val} onChange={onChange} />

         {/*/!*<h2>自定义上传使用默认进度条</h2>*!/*/}
         {/*   <Uploader  ref={uploadRef} onProgress={onProgress} value={val} beforeXhrUpload={upload}>*/}
         {/*       <Button type="success" size="small" onClick={submitUpload}>*/}
         {/*           上传文件*/}
         {/*       </Button>*/}
         {/*   </Uploader>*/}
         {/*   <br />*/}
         {/*   <Progress*/}
         {/*       percentage={progressPercent}*/}
         {/*       strokeColor="linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"*/}
         {/*       status*/}
         {/*   />*/}
        </Form.Item>
    )
}
export default SingleUpload;
"@nutui/nutui-react-taro": "^2.3.10",
    "@tarojs/components": "3.6.24",
    "@tarojs/helper": "3.6.24",
    "@tarojs/plugin-framework-react": "3.6.24",
    "@tarojs/plugin-html": "3.6.24",
    "@tarojs/plugin-platform-alipay": "3.6.24",
    "@tarojs/plugin-platform-h5": "3.6.24",
    "@tarojs/plugin-platform-jd": "3.6.24",
    "@tarojs/plugin-platform-qq": "3.6.24",
    "@tarojs/plugin-platform-swan": "3.6.24",
    "@tarojs/plugin-platform-tt": "3.6.24",
    "@tarojs/plugin-platform-weapp": "3.6.24",
    "@tarojs/react": "3.6.24",
    "@tarojs/runtime": "3.6.24",
    "@tarojs/shared": "3.6.24",
    "@tarojs/taro": "3.6.24",

期望的结果是什么?

正常上传

实际的结果是什么?

截屏2024-03-15 下午2 49 19

环境信息

No response

其他补充信息

No response

sailei1 commented 8 months ago
这样可以上传,但我需要数值回填