Antd的Upload上传组件的使用方式

最新推荐文章于 2024-03-13 13:32:27 发布

kiss约

最新推荐文章于 2024-03-13 13:32:27 发布

阅读量1.6k

点赞数

文章标签：前端 react.js

本文链接：https://blog.csdn.net/m0_47014098/article/details/129812087

版权

Antd的Upload上传组件

1.上传图片

在这里插入图片描述

// 上传获取fileId并下载file
  const customRequest = async (options) => {
    const { file, onProgress, onError, onSuccess } = options
    setLoading(true)
    const formData = new FormData();
    formData.append('file', picFile);
    formData.append('folderName','bzf-portal-background');
    formData.append('project',"bzf-portal-background");
    const { data, code } = await api.upLoadFileRecord(formData);
    if (code == 1) {
      const fileId = data;
      setPicid(data);
      const res = await api.downloadFileAddressRecord({ fileId });
      if (res.code == 1) {
        setImageUrl(res.data);
        //刚开始写好后发现文件已经上传成功，但是没有上传进度，一直显示文件正在上传中，就加上了以下代码
        onProgress({ percent: 100 })
        onSuccess(res, file);
        // console.log('file是什么',file);
        file.status = 'done'
        message.success('文件上传成功');
        // console.log(res.data, '结果');
      }
    } else {
      if (editpic) {
        const res = await api.downloadFileAddressRecord({
          fileId: editpic,
        });
        if (res.code == 1) {
          setImageUrl(res.data);
        }
      }
    }
  }
  
  //上传文件前的钩子
 const beforeUpload = (file) => {
    console.log(file, '文件');
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('只能上传JPG/PNG格式文件!');
      return false;
    }
    const isLt10M = file.size / 1024 / 1024 < 10;
    if (!isLt10M) {
      message.error('图片大小不能超过10MB!');
      return false;
    }
    setFile(file);
  }; 

// Upload组件
<Upload 
  action="/api/bzf-business-file/fileManage/uploadFileWithRename" //上传文件的接口地址
  listType="picture-card" 
  data={{folderName:"bzf-portal-background",project:"bzf-portal-background"}}//请求参数
  customRequest={customRequest}
  showUploadList={true}
  beforeUpload={(file)=>{beforeUpload(file)}}
  // onChange={handleChange}
  maxCount={1}
  > 
  {isEdit ? (
      <div>
        {/* {console.log('imageUrl',imageUrl)} */}
      <img
        src={imageUrl}
        style={{
          width: '90px',
          height: '90px',
        }}
      />
      </div>
    ) : (
    <div>
      <PlusOutlined />
      <div style={{ marginTop: 8 }}>Upload</div>
    </div>)}
 </Upload>