antdesgin的上传图片的方法示例

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.来自于学习大佬的内容