react antd 怎么 使用 form 的 setFieldValue 设置 upload 的默认值？

Question

import React, { useState } from 'react';
import {
  Form,
  Upload,
} from 'antd';



function App = (){
 return ( <Form

      >
        <Form.Item label="Chekbox" name="disabled" valuePropName="checked">
         <Upload  listType="picture-card">
            <div>
              <div style={{ marginTop: 8 }}>Upload</div>
            </div>
          </Upload>
        </Form.Item>
  </Form>)

}

react antd 怎么 使用 form 的 setFieldValue 设置 upload 的默认值

Answer 1

<Form.Item
        noStyle
        shouldUpdate={(prevValues, currentValues) =>
          prevValues[fieldName] !== currentValues[fieldName]
        }
      >
        {({ getFieldValue }) => {
          const fileList = getFieldValue(fieldName);
          console.log('fileList', fileList);
          let imageUrl;
          if (fileList?.[0]?.status === 'done') {
            imageUrl = fileList[0].response.url;
          }
          return (
            <Form.Item
              label={label}
              name={fieldName}
              className={formItemClassName}
              valuePropName="fileList"
              getValueFromEvent={(e: any) => {
                if (Array.isArray(e)) {
                  return e;
                }
                return e && e.fileList;
              }}
              // validateTrigger="o"
              rules={[
                {
                  required: true,
                  message: `请上传${primaryText}`,
                },
                {
                  validator: (rule, value, callback) => {
                    console.log('value', value);
                    const isUploadError = (value || []).some((item: any) => {
                      return item.status === 'error';
                    });
                    if (isUploadError) {
                      callback(`${primaryText}上传失败`);
                      return;
                    }
                    const isUploading = (value || []).some((item: any) => {
                      return item.status === 'uploading';
                    });
                    if (isUploading) {
                      callback(`${primaryText}正在上传中`);
                      return;
                    }
                    callback();
                  },
                },
              ]}
              extra={uploadTips}
            >
              <Upload
                ref={uploadRef}
                accept=".jpeg,.jpg,.png"
                maxCount={1}
                name={fieldName}
                listType="picture-card"
                className={cn('avatar-uploader', !!imageUrl && 'hasUploadImg')}
                multiple={false}
                showUploadList={false}
                customRequest={customUpload}
                beforeUpload={onBeforeUpload}
              >
                {imageUrl ? (
                  <>
                    <div className={style.imgWrapper}>
                      <img
                        src={imageUrl}
                        alt="avatar"
                        style={{ width: '100%' }}
                      />
                    </div>

                    <div className={cn(style.uploadAgain, 'uploadAgain')}>
                      <span>{uploadBtnAgainText}</span>
                    </div>
                  </>
                ) : (
                  uploadButton
                )}
              </Upload>
            </Form.Item>
          );
        }}
      </Form.Item>

Answer 2

import React from 'react';
import { Form, Upload } from 'antd';

function App() {
  return (
    <Form
      initialValues={{
        upload: [
          {
            uid: '1',
            name: 'example.png',
            status: 'done',
            url: 'http://example.com/example.png',
          },
        ],
      }}
    >
      <Form.Item name="upload" label="Upload" valuePropName="fileList">
        <Upload listType="picture-card">
          <div>
            <div style={{ marginTop: 8 }}>Upload</div>
          </div>
        </Upload>
      </Form.Item>
    </Form>
  );
}

export default App;