1.base64格式转化
function getBase64(img, callback) {
const reader = new FileReader();
const $img = new Image();
reader.readAsDataURL(img);
reader.addEventListener('load', () => {
$img.src = reader.result;
$img.addEventListener('load', () => {
callback({
url: $img.src,
width: $img.width,
height: $img.height,
});
});
});
}
2.监听各种事件
function handleChange(info) {
if (info.file.status === 'uploading') {
emit('uploading', { ...info });
loading.value = true;
return;
}
if (info.file.status === 'done') {
emit('success', { ...info, data: unref(info.file.response).data });
getBase64(info.file.originFileObj, ({ url, width, height }) => {
imageUrl.value = url;
loading.value = false;
imageClass.value = width > height ? 'h' : 'v';
});
return;
}
if (info.file.status === 'removed') {
emit('delete', { ...info });
}
if (typeof info.file.status === 'undefined' || info.file.status === 'error') {
loading.value = false;
emit('fail', { ...info });
}
}
3.提示
function beforeUpload(file) {
emit('beforeUpload', file);
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
message.error('You can only upload JPG file!');
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('Image must smaller than 2MB!');
}
return isJpgOrPng && isLt2M;
}
4.来自于学习大佬的内容