大致分为两个步骤

  • 判断是否需要前端临时处理图片预览，已生成则直接显示
  • previewVisible控制显示模态窗口
    1. async handlePreview(file) {
    2.     if (!file.url && !file.preview) {
    3.       file.preview = await getBase64(file.originFileObj);
    4.     }
    5.     this.previewImage = file.url || file.preview;
    6.     this.previewVisible = true;
    7.   },
    本地文件转base64方法
    1. function getBase64(file) {
    2. return new Promise((resolve, reject) => {
    3.   const reader = new FileReader();
    4.   reader.readAsDataURL(file);
    5.   reader.onload = () => resolve(reader.result);
    6.   reader.onerror = error => reject(error);
    7. });
    8. }