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