使用object-to-formdata在iPhone端无法保存表单媒体数据问题求助

我之前也碰到过iOS Safari下FormData操作的奇怪坑，针对你遇到的「转换后追加video无效」且仅iPhone端出问题的情况，给你几个可行的方案：

方案1：让object-to-formdata直接处理video，避免事后追加 #

问题很大概率出在iOS Safari对已生成FormData的追加操作支持不稳定。你可以把video提前加入newProductData，让工具一次性转换，而不是事后追加：

validateForm: function (scope) {
  this.$validator.validateAll(scope).then(result => {
    if (result) {
      this.newProductData.brand = this.step2.brand;
      this.newProductData.condition = this.step3.condition;
      this.newProductData.desc = this.step2.desc;
      this.newProductData.name = this.step2.name;
      this.newProductData.qty = this.step2.qty;
      this.newProductData.height = this.step3.height;
      this.newProductData.width = this.step3.width;
      this.newProductData.depth = this.step3.depth;
      this.newProductData.weight = this.step3.weight;
      this.newProductData.images = this.images;
      // 把video直接加入newProductData，让工具一起转换
      this.newProductData.video = this.formData.get('video'); 
      this.loader = true;
      alert('before formdata');
      let formData = objectToFormData(this.newProductData);
      
      axios.post('/user/dashboard/products/new', formData).then(response=>{
        if(response.data.status === 'success'){
          Vue.toasted.success(response.data.message, { position: 'top-center', duration: 3000 });
          setTimeout(function(){
            window.location.href = '/user/dashboard/products';
          }, 1000);
        }else{
          this.loader = false;
          Vue.toasted.error('Something went wrong!', { position: 'top-center', duration: 3000 })
        }
      });
    }
  });
}

方案2：直接使用原始File对象追加，不要从其他FormData读取 #

如果你必须要事后追加，别从另一个FormData里get('video')，直接用原始的File对象（比如从input[type="file"]拿到的文件）：

// 假设你通过文件选择器拿到的视频存在this.videoFile里
formData.append('video', this.videoFile);

iOS Safari中从FormData读取文件对象可能会返回null或无法正确序列化，直接用原始File对象更可靠。

方案3：放弃第三方工具，手动构建FormData（最稳妥） #

第三方工具可能隐藏了一些兼容细节，手动构建FormData完全可控，在移动端兼容性最好：

validateForm: function (scope) {
  this.$validator.validateAll(scope).then(result => {
    if (result) {
      this.loader = true;
      alert('before formdata');
      let formData = new FormData();
      
      // 逐个添加文本字段
      formData.append('brand', this.step2.brand);
      formData.append('condition', this.step3.condition);
      formData.append('desc', this.step2.desc);
      formData.append('name', this.step2.name);
      formData.append('qty', this.step2.qty);
      formData.append('height', this.step3.height);
      formData.append('width', this.step3.width);
      formData.append('depth', this.step3.depth);
      formData.append('weight', this.step3.weight);
      
      // 处理图片数组
      this.images.forEach((img, index) => {
        formData.append(`images[${index}]`, img);
      });
      
      // 添加视频
      if (this.formData.get('video')) {
        formData.append('video', this.formData.get('video'));
      }
      
      axios.post('/user/dashboard/products/new', formData).then(response=>{
        // ...后续逻辑不变
      });
    }
  });
}

额外注意：检查axios配置 #

你当前设置了emulateJSON: true，这个配置会让axios把数据以application/x-www-form-urlencoded格式发送，但FormData需要的是multipart/form-data。axios会自动识别FormData并设置正确的请求头，所以建议去掉emulateJSON: true，避免格式冲突。

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