elementui formdata

《elementui formdata》

解决方案简述

Element UI 是一个常用的 Vue.js UI 库，它提供的 Form 组件可以帮助开发者快速构建表单。当涉及到将表单数据提交到服务器时，FormData 对象就显得尤为重要。探讨如何使用 Element UI 的 Form 组件与 FormData 结合起来，实现表单数据的正确提交，并给出多种解决方案。

一、直接使用 model 属性绑定数据并转换为 FormData

创建一个简单的表单：
```html

提交

export default {
data() {
return {
ruleForm: {
username: '',
password: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
};
},
methods: {
submitForm() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
const formData = new FormData();
for (let key in this.ruleForm) {
formData.append(key, this.ruleForm[key]);
}
// 此处可以进行请求发送，例如 axios.post('/api/login', formData)
console.log(formData);
} else {
console.log('error submit!!');
return false;
}
});
}
}
};

</p>

<h2>二、处理文件上传类型的表单项</h2>

<p>如果表单中包含文件上传项，例如图片上传，那就要特别注意了。
```html

  
    <!-- 其他表单项 -->
    
      
        <img class="avatar">
        <i class="el-icon-plus avatar-uploader-icon"></i>
      
    
  
</p>


export default {
  // ...其他代码
  data() {
    return {
      // ...其他数据
      ruleForm: {
        // ...其他表单项
        avatar: ''
      }
    };
  },
  methods: {
    handleChange(file) {
      this.ruleForm.avatar = file.raw; // 将文件对象赋值给 avatar
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const formData = new FormData();
          for (let key in this.ruleForm) {
            formData.append(key, this.ruleForm[key]);
          }
          // 如果是文件类型，这里会直接添加文件对象
          // 然后发送请求
        }
      });
    }
  }
};


<p>

三、动态表单场景下的 FormData 处理

在某些情况下，表单可能是动态生成的，比如根据用户选择来增减表单项。
```html

删除

新增项目
提交

export default {
data() {
return {
dynamicForm: {
items: [
{
value: ''
}
]
}
};
},
methods: {
addItem() {
this.dynamicForm.items.push({ value: '' });
},
removeItem(index) {
this.dynamicForm.items.splice(index, 1);
},
submitDynamicForm() {
const formData = new FormData();
this.dynamicForm.items.forEach((item, index) => {
formData.append(`item_${index}`, item.value);
});
// 发送请求
}
}
};