图片上传删除图片后再次上传同一个图片不成功

问题描述:

上传图片后,删除该图片,再次上传该图片,无法进行上传

<input #fileupload multiple type="file" (change)="uploadChange($event)">

原因分析:

虽然删除了该图片,但input绑定的value的值并没删除,指向的依旧是该图片


解决方案:

上传成功后清除组件的值

this.fileupload.nativeElement.value = null;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
非常抱歉给您带来了困扰。在 HBuilderX 实现图片对应的红叉和删除功能比较复杂,需要借助 JavaScript 的事件处理和 DOM 操作。以下是一个可能的解决方案: ```html <template> <div class="fb_content"> <textarea v-model="textVal" @input="handleTextInput" placeholder="请描述一下您的问题"></textarea> <div class="fb_tool"> <button @click="handleChooseImg">+</button> <div class="up_img_item" v-for="(item, index) in chooseImgs" :key="index"> <img :src="item" :style="{ width: '200px', height: '200px' }" :class="{ 'rounded': true }" /> <span class="delete-btn">×</span> </div> </div> </div> </template> <style> .rounded { border-radius: 50%; } .delete-btn { position: absolute; right: 10px; top: 10px; cursor: pointer; color: red; font-size: 20px; } </style> <script> export default { data() { return { textVal: '', chooseImgs: [] }; }, mounted() { // 监听删除按钮的点击事件 const deleteBtns = document.querySelectorAll('.delete-btn'); deleteBtns.forEach((btn, index) => { btn.addEventListener('click', () => { this.handleRemoveImg(index); }); }); }, methods: { handleChooseImg() { // 添加图片逻辑 // ... // 添加图片重新绑定删除按钮的事件监听 this.bindDeleteBtnEvent(); }, handleRemoveImg(index) { // 删除图片逻辑 // ... // 删除图片重新绑定删除按钮的事件监听 this.bindDeleteBtnEvent(); }, bindDeleteBtnEvent() { const deleteBtns = document.querySelectorAll('.delete-btn'); deleteBtns.forEach((btn, index) => { btn.removeEventListener('click', () => { this.handleRemoveImg(index); }); }); deleteBtns.forEach((btn, index) => { btn.addEventListener('click', () => { this.handleRemoveImg(index); }); }); }, handleTextInput() { // 处理文本输入的逻辑 // ... } } }; </script> ``` 在这个解决方案,我们使用 `mounted` 钩子函数来在组件挂载后绑定删除按钮的事件监听。同,为了确保每次添加或删除图片后,删除按钮的事件监听都能正确绑定,我们在 `handleChooseImg` 和 `handleRemoveImg` 方法重新调用了 `bindDeleteBtnEvent` 方法。 请注意,这种解决方案使用了 JavaScript 的 DOM 操作,不太符合 Vue.js 的响应式原则。如果您希望更好地遵循 Vue.js 的设计原则,可以尝试使用 Vue.js 的组件方式来实现图片上传删除功能。 再次为之前的误导道歉,希望这次的解决方案能够满足您的需求。如果还有其他问题,请随提问。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值