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);
 }

猜你喜欢

转载自blog.csdn.net/Motion_zq/article/details/131843737
今日推荐