vant的图片上传组件预览问题

先记录问题：主要是我直接吧图片的base64字符串存入了数据库，再次打开页面加载图片时，要么就是页面显示图片错误，要么就是点击图片预览时查看失败（因为使用的vue+vant+cordova+sqlite实现单机版应用，不希望联网，所以直接把图片存数据库了）。vant版本是4.8.0

当file对象设置属性url值是"data:image/png;base64,iVBORw0KG..."格式时，页面显示如下：

for(var i=0;i

当file对象设置属性content值是"data:image/png;base64,iVBORw0KG..."格式时，页面可以正常显示，但是一点击图片预览，可以正常放大预览的，可是页面显示却不正常了，变为上面样子了。

for(var i=0;i

点击图片预览前，页面显示正常。

点击图片预览后，页面显示异常：

如果不设置objectUrl属性，则点击图片无法正常预览。

试了很多方法都没办法达到预期效果。于是决定修改vant的源码。

vant的图片上传组件文件路径vant/es/uploader/Uploader.mjs（或者vant/lib/uploader/Uploader.js），原来的代码如下：

    const previewImage = (item) => {
      if (props.previewFullImage) {
        const imageFiles = props.modelValue.filter(import_utils2.isImageFile);
        const images = imageFiles.map((item2) => {
          if (item2.objectUrl && !item2.url && item2.status !== "failed") {
            item2.url = item2.objectUrl;
            urls.push(item2.url);
          }
          return item2.url;
        }).filter(Boolean);
        imagePreview = (0, import_image_preview.showImagePreview)((0, import_utils.extend)({
          images,
          startPosition: imageFiles.indexOf(item),
          onClose: onClosePreview
        }, props.previewOptions));
      }
    };

问题估计就是在里面那个if语句上面。修改后的源码：

    const previewImage = (item) => {
      if (props.previewFullImage) {
        const imageFiles = props.modelValue.filter(isImageFile);
        const images = imageFiles.map((item2) => {
          if (item2.objectUrl && !item2.url && item2.status !== "failed") {
			if(item2.objectUrl.indexOf("blob:") == 0){
				return item2.objectUrl;
			}
            item2.url = item2.objectUrl;
            urls.push(item2.url);
          }
          return item2.url;
        }).filter(Boolean);
        imagePreview = showImagePreview(extend({
          images,
          startPosition: imageFiles.indexOf(item),
          onClose: onClosePreview
        }, props.previewOptions));
      }
    };

然后清空缓存，重新启动调试，测试正常。

注意修改node_modules下面的源码后，需要删除vite的缓存。即deps目录（建议删除前先备份）。然后npm run dev重新启动。