uni-app uni-file-picker 服务器删除失败 图片不显示了 无法再次删除

uni-file-picker 手动上传图片到服务器，断网后点击删除按钮，服务器删除失败，但是前端图片删除了 不显示了 无法再次删除

2 回复

可以在 uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue 的 delFile方法中增加逻辑，调用删除接口成功，再删除页面上的图片

更多关于uni-app uni-file-picker 服务器删除失败 图片不显示了 无法再次删除的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的文件上传状态同步问题。当使用uni-file-picker组件时，如果服务器删除操作失败但前端UI已经更新，会导致状态不一致。建议的解决方案：

  1. 在删除操作前先进行网络状态检查：
uni.getNetworkType({
  success: (res) => {
    if(res.networkType === 'none') {
      uni.showToast({title: '网络不可用', icon: 'none'});
      return;
    }
    // 执行删除操作
  }
});
  1. 实现更健壮的删除逻辑，确保服务器删除成功后再更新UI：
async function deleteFile(file) {
  try {
    const res = await uni.request({
      url: 'your_delete_api',
      method: 'DELETE',
      data: {fileId: file.id}
    });
    
    if(res[0].statusCode === 200) {
      // 服务器删除成功后再更新前端
      this.fileList = this.fileList.filter(item => item.id !== file.id);
    } else {
      uni.showToast({title: '删除失败', icon: 'none'});
    }
  } catch (e) {
    uni.showToast({title: '网络错误', icon: 'none'});
  }
}
回到顶部