antd upload踩坑

Upload组件

Upload组件是antd的上传组件。默认样式如下图。

当我们想要上传图片的时候，需要修改showUploadList={xx} + listType={xx}。同时，如果是卡片格式 那么Upload组件需要添加Image子组件。

              <Upload
              //-------以下为重要属性-------
              // name的取值是发到后台的文件参数名。name的取值取决于action的入参名，需要和后端对接
                name="file" 
                action={uploadInfo.url} //action是上传的接口
                beforeUpload={beforeUpload}//上传之前处理文件流的
                onChange={handleUploadChange}//用来获取数据、更新图片url、loading之类的
                data={{
                  ...uploadInfo.fields,
                }}//这个很重要  是 伴随着action一起传过去的 参数，当然有些是不需要的。
                
                //-------以下为展示样式、文件类型、是否禁用等常规属性.可以从参考官网-------

                showUploadList={false}//是否以list形式展示
                withCredentials={false}//上传请求时是否携带 cookie
                accept={accept}//可接受的数据类型
                listType={listType}
                multiple={multiple}
                disabled={permission?.actions === 'r'}
              >
				//这个部分 你想加啥都行。看情况。
                {imageUrl || detailInfo.logo ? (
                  <img
                    src={imageUrl || logoUrl}
                    alt="avatar"
                    style={{ height: '90%', width: '90%' }}
                  />
                ) : (
                  <div>
                    {isLoading ? <LoadingOutlined /> : <PlusOutlined />}
                    <div className="ant-upload-text">Upload</div>
                  </div>
                )}
              </Upload>

需要注意的是。项目中上传可能并不会直接给前端一个 上传的action对应的url
首先，这个例子里就先去调用logoUploadForm方法。获取到返回的数据后，做一些处理，生成newUploadInfo。newUploadInfo会被传递给<Upload/>的data 属性。
其次，newUploadInfo的一个属性 url 才是真正的上传的接口，被传递给<Upload/>的action 属性。

const beforeUpload = async (file: RcFile) => {
    const fileExt = file.type.slice(6);
    const response = await logoUploadForm({ customer_id });

    const newUploadInfo = {
    	//xxxxx一些处理
    };
    setUploadInfo(newUploadInfo);
  };