html input type='file'和使用formData上传文件

1、使用input标签，属性设置type=‘file’用于选择本地文件，。

<input type='file' accept='image/*' />

   accept属性设置可选择文件的类型。选择一个文件后，控制台查看event.target.files[0].type属性即是该类文件可以设置的accept值。

  图片使用'image/png'/'image/jpg'/'image/gif'等等，不限制图片格式使用'image/*'。

  视频使用'video/{}'。

  非媒体文件大部分使用'application/{}'，比如，'application/pdf'、'application/zip'等。

  大部分情况下，原生input组件不能满足个性化的样式需求，隐藏input，用其它组件触发click事件即可。

2、使用formData上传文件

  const file = event.target.files[0]
  const formData = new FormData();
  formData.append('file', file);  // 文件
  formData.append('params', '参数');
  formData.append('array',JSON.stringify([1,2,3]));  // 数组转字符串
  return fetch(url, {
    method: 'POST',
    body: formData,
    headers: {
      // 'Content-Type': 'multipart/form-data;', // 设置该属性则不自动设置boundary,导致上传文件格式错误，后端无法解析
    },
  }).then(response => checkResponseType(response, api))
    .catch((e) => {
      throw e;
    });

更多信息参考FormData 的 API