您现在的位置是:首页 > Javascript
当前栏目
ant design中upload组件 上传图片压缩
2023-04-18 13:12:27 时间
不想描述多余的,直接看代码简单直接
const [defaultFileList, setDefaultFileList] = useState([]);
<Upload
accept="image/*"
customRequest={uploadImage}
onChange={handleOnChange}
listType="picture-card"
showUploadList={true}
fileList={defaultFileList}
onRemove={removeFileItem}
beforeUpload={beforeUpload}
className="image-upload-grid"
>
{defaultFileList.length >= 3 ? null : uploadButton}
</Upload>
- customRequest 自定义上传图片的
const uploadImage = async options => {
const { onSuccess, onError, file, onProgress, fileList } = options;
const fmData = new FormData();
fmData.append('file', file);
try {
fetch(`***/api/common/upload_file`, {
method: 'POST',
credentials: 'include',
body: fmData
})
.then(response => response.json())
.catch(error => {
message.error('error');
})
.then(response => {
onSuccess('Ok');
if (response.code === 0) {
let list = {
uid: file.uid,
data: response.data
};
//setDefaultFileList 这个这个一定需要
setDefaultFileList([
...defaultFileList,
{ ...file, url: `https:www.***.com/api/file/download/${response.data}`, uid: response.data }
]);
setState({
imgList: [...imgList, list]
});
setState({
imgfileId: [...imgfileId, response.data]
});
} else {
message.error(response.msg);
}
console.log('Success:', response);
});
} catch (err) {
console.log('Eroor: ', err);
const error = new Error('Some error');
onError({ err });
}
};
- beforeUpload 压缩图片在这一步操作
const beforeUpload = (file, fileList) => {
return new Promise(resolve => {
// 图片压缩
let reader = new FileReader(),
img = new Image();
reader.readAsDataURL(file);
reader.onload = function(e) {
img.src = e.target.result;
};
img.onload = function() {
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
let originWidth = this.width;
let originHeight = this.height;
canvas.width = originWidth;
canvas.height = originHeight;
context.clearRect(0, 0, originWidth, originHeight);
context.drawImage(img, 0, 0, originWidth, originHeight);
canvas.toBlob(
blob => {
let imgFile = new File([blob], file.name, { type: file.type }); // 将blob对象转化为图片文件
resolve(imgFile);
},
file.type,
0.2
); // file压缩的图片类型
};
});
};
- onChange 一定需要
const handleOnChange = ({ file, fileList, event }) => {
let a = {
uid: '1',
name: file.name,
status: 'uploading',
url: ''
};
setDefaultFileList([a]);
};
- onRemove 也需要
const removeFileItem = (file, fileList) => {
console.log('file', file, fileList);
console.log(defaultFileList);
const matchKey = file.uid !== undefined ? 'uid' : 'name';
const removed = defaultFileList.filter(item => item.uid !== file[matchKey]);
if (removed.length === defaultFileList.length) {
return null;
}
setDefaultFileList(removed);
return removed;
};
相关文章
- 前端面试 【JavaScript】— typeof 是否能正确判断类型?
- 前端面试 【JavaScript】— instanceof 能否判断基本数据类型?
- 前端面试 【JavaScript】— 能不能手动实现一下 instanceof 的功能?
- 前端面试 【JavaScript】— Object.is和=== 有什么区别?
- 前端面试 【JavaScript】— JS中类型转换有哪几种?
- 前端面试 【JavaScript】— == 和 ===有什么区别?
- 前端面试 【JavaScript】— 对象转原始类型是根据什么流程运行的?
- JavaScript 的 parseInt() 函数
- javascript实现两个数字进行组合
- JS监听键盘按键
- 大前端开发中的路由管理之五:Flutter篇
- Javascript的DOM操作
- 在Vue项目中使用WebSocket技术
- 新手向:前端程序员必学基本技能——调试JS代码
- React 毁了 Web 开发!
- 「JS 逆向百例」cnki 学术翻译 AES 加密分析
- 商标注册域名后缀用什么?商标和域名有哪些区别?
- 网站建设流程是怎样的?需要看重哪些细节?
- 网站域名商标注册流程是什么?网站域名商标有什么用?
- 如何建设一个实用性强的网站 网站上线后如何运营