向后台请求怎么组织参数

Question

1.一个弹窗下有三个字段A,B,C点击A去上传图片(每次只能上传一张,成功后后台返回一个key),点击B去上传图片(每次只能上传一张,成功后后台返回一个key),...
点击确定按钮时给后台传的数据格式是这样的
sysCompanyMallCertFileList:[
{

fileType:"A", (字段)
key:"123",
num:0,(上传的第几张)

},
{

fileType:"A", (字段)
key:"456",
num:2,(上传的第几张)

},
{

fileType:"B", (字段)
key:"789",
num:0,(上传的第几张)

},
大概意思就是每上传一张图片,就需要给后台传{上述的数据格式过去},写了一天,实在是写不出来了,求大神指导一下,给个思路 谢谢大家了

Answer 1

/**
 * @typedef {object} FileData
 * @property {'A'|'B'|'C'} fileType
 * @property {string} key
 * @property {number} num
 * */

/**
 * 上传文件
 * @param {File} file
 * @return {Promise<string>}
 * */
function uploadFile(file) {
  // file参数是用户的文件对象，即input type=file onchange事件携带的文件对象
  return new Promise(resolve => {
    // 延时模拟ajax请求
    setTimeout(() => {
      // 返回一个key, file+4位随机数
      resolve('file' + (Math.ceil(Math.random()*10000)).toString());
    }, Math.random()*10);
  })
}

/**
 * 上传数据
 * @param {FileData[]} datas 
 * @return {Promise<string>}
 */
function uploadData(datas) {
  return Promise.resolve('success');
}

/** @type {FileData[]} */
var datas = [];

// 给input绑定事件,因为是示例，所以像选择器这些知道是要干嘛就好，根据实际情况而定
var $inputs = document.querySelectorAll('input[type="file"]');
[].forEach.call($inputs, function ($input) {
  $input.onchange = e => {
    var el = e.target;
    uploadFile(el.files[0]).then(key => {
      // 这里的像fileType值假设是用data-*来绑定的
      // 不一定非要这样，也可以用其他方式，这里只是一种方式
      datas.push({
        fileType: el.dataset.type,
        key,
        num: datas.length,
      })
    })
  }
})

// 这里就是把数据上传而已，核心还是怎么把数据准备好，也就是input onchange之后的逻辑
document.getElementById('confirm').onclick = () => {
  uploadData(datas).then(console.log);
}