Vue(NUXT)项目iOS Webview中点击上传按钮拍照后页面自动刷新如何解决？

问题根因 #

iOS系统对Webview进程的内存分配阈值较低，调用系统相机拍照时，相机进程会占用大量系统内存，系统会优先回收后台状态的Webview进程来释放资源，拍照结束返回Webview时就会触发页面重新加载，也就是你遇到的自动刷新问题。相册选择场景内存占用低，不会触发系统回收逻辑，因此运行正常。

解决方案 #

方案1：修复文件输入框的兼容逻辑 #

iOS Webview对display: none隐藏的文件输入框触发逻辑存在兼容性缺陷，同时你当前的输入框配置也有优化空间：

1. 替换隐藏方案，不要使用display: none，改为用定位+透明度的方式隐藏输入框：

.hidden-file-input {
  position: absolute;
  top: -9999px;
  left: -9999px;
  opacity: 0;
  width: 0;
  height: 0;
  visibility: hidden;
}

给input绑定对应的类名即可。
2. 调整input的accept属性为image/*，提升格式兼容性：

<input ref="ImageFileHiddenInput" accept="image/*" @change="onFileChange" type="file" name="image_file" class="hidden-file-input" />

3. 按钮触发输入框点击时，阻止默认事件和冒泡，避免额外的页面行为：

<button @click="handleUploadClick" class="m-1" type="button" size="mini"><i class="fas fa-cloud-upload-alt"></i> Upload</button>

handleUploadClick(e) {
  e.preventDefault()
  e.stopPropagation()
  this.$refs.ImageFileHiddenInput.click()
}

方案2：主动清理输入框缓存 #

每次上传操作结束后，不管成功失败都清空input的value值，避免iOS的文件缓存逻辑引发异常：

uploadImage() {
  if (this.imageFile) {
    var bodyFormData = new FormData();
    bodyFormData.append("UploadFile", this.imageFile);
    this.$axios
      .post(`/upload-photo-file-url`, bodyFormData)
      .then((res) => {
        console.log('success')
      })
      .catch((err) => {
        console.error(err);
      })
      .finally(() => {
        // 统一清空input值
        this.$refs.ImageFileHiddenInput.value = ''
      })
  }
},

方案3：优化内存占用（适用于App内嵌Webview场景） #

1. 页面触发上传前，主动清理不必要的大体积缓存、未使用的图片资源，降低Webview的内存占用，减少被系统回收的概率。
2. 联系原生开发同学，调高Webview的内存分配阈值，同时配置Webview的状态恢复能力，即使进程被系统回收，返回时也能恢复到之前的操作状态，不会直接刷新首页。

内容的提问来源于stack exchange，提问作者AbingPj