如何使用Element UI el-upload组件手动上传文件并提交表单？

<code class="javascript"><el-upload
  :action="uploadUrl"
  accept=".jpg,.png,.jpeg,.gif"
  multiple
  ref="housingright"
  :on-success="handleFileUpload"
></el-upload>
<el-button @click="submitForm">提交表单</el-button></code>

<code class="javascript">export default {
  data() {
    return {
      uploadUrl: '/your/upload/url', //替换成你的上传地址
      extraParams: [],
      form: {} //你的表单数据
    };
  },
  methods: {
    submitForm() {
      Promise.all(this.extraParams.map(item => item.file.uid))
        .then(() => {
          // 所有文件上传成功后提交表单
          this.httpService.postRequest("/insert_smallbusiness", this.form)
            .then(() => {
              // 表单提交成功后的处理
            })
            .catch(err => {
              console.error("表单提交失败", err);
            });
        })
        .catch(err => {
          console.error("文件上传失败", err);
        });
    },
    handleFileUpload(res, file) {
      const { code, data } = res;
      if (code === 200) {
        const existingParam = this.extraParams.find(item => item.file.uid === file.uid);
        if (existingParam) {
          Object.assign(existingParam, { ...data }); // 更新现有参数
        } else {
          this.extraParams.push({ file, ...data }); // 添加新参数
        }
      } else {
        // 处理上传失败的情况
        console.error('文件上传失败:', res);
      }
    }
  }
};</code>