Antd pro6中ProFormUploadDragger上传文件

因为一边听歌一边敲代码, 断断续续搞了一个小时, 我还是不能和各路大神一样一心两用, 在这里做个总结先

1. 使用ProForm组件里面的ProFormUploadDragger, 在点击上传时, 不会立马上传而是会将file文件对象存储到 formRef={getForm}中

当用户点击提交按钮再进行上传, 这样就避免了用户上传图片然后没有提交表单, 图片依旧上传了

2.既然要上传文件, 请求头和文件类型也要换一下, 通过new FormData();转一下就行, 参数通过formdata.append(“file”, tempForm.copyother[0].originFileObj);去添加
注意转的参数不是整个返回的file对象, 需要文件的原始对象originFileObj
3. 设置请求头, 我这里使用的是框架搭建好的, 代码如下

import { request } from "@umijs/max";

/** 文件上传 - 服务器中转 */
export async function fileUpload(
  params:any,
  options?: { [key: string]: any }
) {
  return request<{ link: string; fid: number }>("/admin/v1/file/upload", {
    method: "post",
    data: params,
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    ...(options || {}),
  });
}

需要注意的点就是data的params不要展开, 不然传过去的对象为空, 使用直接将格式化之后的file传过来即可

 let formdata = new FormData();
 formdata.append("file", tempForm.copyother[0].originFileObj);
 formdata.append("file_type", "2");
 formdata.append("ossPath", "other");
 formdata.append("secret_type", "1");
 formdata.append("mobile", user[0].mobile);
 console.log("formdata", formdata);

 try {
   const res = await fileUpload(formdata);
   console.log(res);
  } catch (error) {
  console.log(error);
 }