element upload 自定义上传 报错Cannot set properties of null (setting ‘status‘)

element upload 自定义上传 报错Cannot set properties of null (setting ‘status’)

问题展示

问题展示

原因分析

自定义上传方式
fileList 显示一切正常,状态也是成功
文件url通过URL.createObjectURL(file.raw) 进行添加
以下为配置代码

<el-upload
  class="upload-demo"
  action=""
  :on-change="uploadImageChange"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="1"
  :on-exceed="handleExceed"
  :file-list="fileList"
>
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip" style="font-size: 11px;">只能上传svg文件,且不超过500kb</div>
</el-upload>

以下为fileList 添加代码

that.fileList = [{ name: new Date().getTime(), url: URL.createObjectURL(res.raw) }]
问题修复

在组件上添加以下代码

:auto-upload="false"

完整代码如下所示

<el-upload
 class="upload-demo"
  action=""
  :on-change="uploadImageChange"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  :auto-upload="false"
  multiple
  :limit="1"
  :on-exceed="handleExceed"
  :file-list="fileList"
>
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip" style="font-size: 11px;">只能上传svg文件,且不超过500kb</div>
</el-upload>

添加后问题即可修复

注意

本文上传方式为自定义上传action 为空,因此需要添加:auto-upload=“false”

  • 9
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
如果报错提示 `Cannot read properties of null (reading 'querySelector')`,那么说明 `querySelector` 方法返回了 `null`,表示指定的选择器没有找到对应的元素。这通常是因为选择器不正确或者对应的元素还没有被加载到页面上。 要解决这个问题,可以检查以下几个方面: 1. 检查选择器是否正确:确保选择器中使用的 ID 或 class 名称正确,并且没有拼写错误。可以在开发者工具中使用选择器来检查页面上是否存在对应的元素。 2. 确保元素已经加载到页面上:如果你在页面加载完成之前就尝试获取元素,那么可能会出现找不到元素的情况。可以在 `window.onload` 事件中获取元素,或者将你的 JavaScript 代码放在页面底部,以确保元素已经加载到页面上。 3. 确保选择器对应的元素存在:如果你使用的选择器确实存在,但是在某些情况下可能不存在(例如,你的页面是根据用户输入动态生成的),那么你需要在使用 `querySelector` 方法之前先检查该元素是否存在。可以使用 `if` 语句和 `null` 检查来实现这个功能: ```javascript const element = document.querySelector('#my-element'); if (element !== null) { // 元素存在,可以进行操作 element.style.backgroundColor = 'red'; } else { // 元素不存在,进行错误处理 console.error('Element not found!'); } ``` 通过检查选择器是否正确、元素是否已经加载到页面上以及元素是否存在,你应该能够解决 `Cannot read properties of null (reading 'querySelector')` 报错问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值