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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值