uni-app uni-file-picker 默认插槽自定义图片打包提示he is not a constructor

uni-app uni-file-picker 默认插槽自定义图片打包提示he is not a constructor

操作步骤：

  • 使用默认插槽，打包部署到服务器，提示错误，使用的vue3版本，vite编译

预期结果：

  • 使用插槽，打包不报错

实际结果：

  • 使用默认插槽，打包部署到服务器，提示错误

bug描述：

运行没有问题，打包就提示

index-54ba231d.js:1 TypeError: he is not a constructor

点击查看源码：

q = "" + new he("cus_upload-bg-587599f0.png",import.meta.url).href;

我本地的代码

<uni-file-picker ref="myFilePicker" :auto-upload="false" fileMediatype="image" mode="grid" :limit="maxCount" @select="select"  
    @delete="deletePic">  
    <image class="upload-bg" src="../../static/cus_upload-bg.png" mode="aspectFit">  
</uni-file-picker>

附件


更多关于uni-app uni-file-picker 默认插槽自定义图片打包提示he is not a constructor的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

能否直接提供一个更加直观复现的工程zip附件，我测试了一下官方的打包之后的hello项目并未复现该问题

更多关于uni-app uni-file-picker 默认插槽自定义图片打包提示he is not a constructor的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已经解决了，是我部署目录base写错了，导致图片资源加载不出来

在使用 uni-app 的 uni-file-picker 组件时，如果你尝试通过默认插槽自定义图片上传的样式，并且遇到了 he is not a constructor 的错误提示，这通常是因为你在代码中错误地使用了某个构造函数或类。

以下是一些可能导致这个问题的原因及解决方法：

1. 检查自定义插槽的代码

确保你在默认插槽中使用的代码是正确的，特别是如果你使用了某个类或构造函数。例如：

<uni-file-picker>
  <template v-slot:default="{ files }">
    <div v-for="(file, index) in files" :key="index">
      <img :src="file.path" alt="Uploaded Image" />
    </div>
  </template>
</uni-file-picker>

确保你没有在插槽中错误地使用某个类或构造函数。

2. 确保正确导入组件

确保你已经正确导入了 uni-file-picker 组件：

import uniFilePicker from '[@dcloudio](/user/dcloudio)/uni-ui/lib/uni-file-picker/uni-file-picker.vue';

export default {
  components: {
    uniFilePicker
  }
}

3. 检查依赖版本

确保你使用的 uni-ui 和 uni-app 版本是兼容的。如果你使用的是较旧的版本，可能存在一些已知的 bug 或兼容性问题。

4. 检查其他代码

如果你在项目中使用了其他第三方库或自定义组件，检查这些代码中是否有错误地使用了某个类或构造函数。

5. 查看控制台错误信息

查看浏览器的控制台或微信开发者工具的控制台，查看是否有更详细的错误信息。通常，he is not a constructor 错误会伴随着具体的代码行号和文件名，帮助你定位问题。

6. 更新依赖

如果你的 uni-ui 或 uni-app 版本较旧，尝试更新到最新版本，看看问题是否得到解决。

npm update [@dcloudio](/user/dcloudio)/uni-ui

7. 示例代码

以下是一个完整的示例代码，供你参考：

<template>
  <view>
    <uni-file-picker>
      <template v-slot:default="{ files }">
        <div v-for="(file, index) in files" :key="index">
          <img :src="file.path" alt="Uploaded Image" />
        </div>
      </template>
    </uni-file-picker>
  </view>
</template>

<script>
import uniFilePicker from '[@dcloudio](/user/dcloudio)/uni-ui/lib/uni-file-picker/uni-file-picker.vue';

export default {
  components: {
    uniFilePicker
  }
}
</script>

<style>
/* 你的样式 */
</style>
回到顶部