antd上傳元件upload踩坑和封裝

效果圖：

1、公共元件封裝：

將antd中的上傳元件進行改進：

不同檔案格式使用不同上傳樣式；

增加上傳限制：大小，數量，尺寸；

uploadcustom.js

import  from '@ant-design/icons';

import from 'antd';
import axios from 'axios';
import bytes from 'bytes';
import dayjs from 'dayjs';
import react, from 'react';
import from '../../utils/utils';
function uploadoss(props) = props;
const [uploaddata, setuploaddata] = usestate({});
let flag = false;
// 初始化上傳所需引數（從介面獲取，過程省略）
const init = async () => );
};useeffect(() => , [dirpath]);
// 捕捉上傳出錯的檔案
const handlechange = () => 
if (onchange) 
};// 移除檔案
const onremove = (file) => 
};// 上傳之前轉換物件
const transformfile = (file) => -$$$`;
file.url = `$$`;
return file;
};// 上傳所需額外引數
const getextradata = (file) => ;
};// 尺寸比例限制
const checksize = (file) => ;
img.src = url.createobjecturl(file);
}).then(
() => ,
() => );
flag = false;
}return promise.reject();
},);
};// 大小限制
const checklimit = (file) => ).then(
() => ,
() => ，請重新選擇！`,
});flag = false;
}return promise.reject();
},);
};// 數量限制
const checklen = (filelist) => ).then(
() => ,
() => 張，請重新選擇！`,
});flag = false;
}return promise.reject();
},);
};// 判斷所有條件滿足才能上傳
const beforeupload = async (file, filelist) => 
return islen && issizelimit && issize;
};// 預覽處理
const handlepreview = async (file) => );
}const image = new image();
image.src = src;
const imgwindow = window.open(src);
imgwindow.document.write(image.outerhtml);
};const uploadprops = ;
// 檔案和使用不同的樣式
const con = () =>
listtype ? (
上傳) : (
上傳);
return ;
}export default memo(uploadcustom);

index.js

import uploadcustom from '';

return (
<>
)

upload元件 獲得焦點 upload 元件

元件效果 元件目錄 元件html 新增附件 名稱型別描述操作 上傳附件 id projectfile name projectfile 元件css 元件呼叫 上傳附件 關閉var param system operation edit true,是否編輯 btnhandle true,orderst...

layui的upload元件使用和上傳阻止

頁面上乙個按鈕，點選彈出上傳框，從按鈕的方法 開始寫 處理未選擇檔案阻止上傳 通過判斷選擇檔案的數量，顯示或隱藏上傳按鈕 在js中定義 1 function uploadfile 4243 44 45createupload 4647 48 4950 51var files 5253 functio...

layui的upload元件使用以及上傳阻止測試

背景 頁面上乙個按鈕，點選彈出上傳框，從按鈕的方法 開始寫 處理未選擇檔案阻止上傳 通過判斷選擇檔案的數量，顯示或隱藏上傳按鈕 在js中定義 function uploadfile obj.preview function index,file,result alldone function obj...