jQuery场景下用户不更新图片时如何保留当前已获取的原有图片值？

问题原因 #

你现在的逻辑存在两个核心问题：

1. 当用户未选择新图片时，你给pictureData赋值的是图片URL字符串，但FormData的append方法如果传入字符串，后台会把这个字段当成普通文本处理，和你传文件流时的字段类型不一致，自然没法正常读取。
2. isImageChosen的触发逻辑有问题：用户只要点了「Choose」按钮，哪怕在文件选择弹窗里直接点取消，这个标识也会被设为true，导致逻辑判断错误。

解决方案 #

你可以根据后端的接收逻辑选其中一种实现：

方案1：后端兼容两种传参方式（最简单）

后端新增判断逻辑，如果是不更新图片的场景，直接读取picture字段的URL字符串使用即可，你只需要补充字段标识区分场景，同时修复标识触发的bug就行：
修改后的JS代码：

$(document).ready(function() {
  var isImageChosen = false;
  // 把行内的oninput逻辑移到这里，只有真的选了文件才修改标识
  $("#picture").on('input', function() {
    if(this.files[0]) {
      $("#picture_photoViewer").attr('src', window.URL.createObjectURL(this.files[0]));
      isImageChosen = true;
    }
  })

  $(".choose").click(function() {
    $("#picture").click();
  });
  getPhoto();

  $("#approve").click(function() {
    let formData = new FormData();
    if (isImageChosen) {
      // 选了新图片就传文件流
      formData.append('picture', $('#picture')[0].files[0]);
    } else {
      // 没选新图片就传原有URL
      formData.append('picture', $("#picture_photoViewer").attr('src'));
    }
    formData.append('is_image_updated', isImageChosen ? 1 : 0);

    for (var pair of formData.entries()) {
      console.log(pair[0] + ', ' + pair[1]);
    }
  });
});

const getPhoto = () => {
  let photo = 'http://hd.wallpaperswide.com/thumbs/beast_2-t2.jpg';
  $("#logo").append(`<img id="picture_photoViewer" src="${photo}" width="100" height="100">`);
}

同时把HTML里input标签的oninput属性删掉即可。

方案2：后端要求必须传文件流

如果后端要求不管更不更新都必须传文件格式的参数，你需要把现有图片的URL转成File对象再传入FormData：
修改后的提交逻辑如下：

$("#approve").click(async function() {
  let formData = new FormData();
  if (isImageChosen) {
    formData.append('picture', $('#picture')[0].files[0]);
  } else {
    // 把图片URL转成File对象
    const imgSrc = $("#picture_photoViewer").attr('src');
    const response = await fetch(imgSrc);
    const blob = await response.blob();
    const file = new File([blob], 'old_image.jpg', { type: blob.type });
    formData.append('picture', file);
  }
  // 后续提交逻辑不变
});

注意这个方案如果图片URL跨域的话，需要图片服务器配置CORS允许你的域名访问，否则会报跨域错误。

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