前端需要通過認證去拿後端傳回的圖檔

後端傳回圖檔，前端傳給後端File類型

第一步：将擷取的圖檔轉成blob

将請求傳回的類型改成blob

//封裝的請求
export function get(url, params, isblob) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params,
      responseType: isblob ? 'blob' : 'json'
    }).then(res => {
      resolve(res.data)
    }).catch(err => {
      let errorText = '發生未知錯誤'
      if (err.data && err.data.message) {
        errorText = err.data.message
      }
      notification.error({
        description: errorText,
      })
      reject(err.data)
    })
  })
}
//接口格式
export const get_image = (params) => get(url, params, true)
           

第二步：将blob轉成File檔案

const files = new window.File(
          [blob],
          '圖檔名稱',
          { type: res_img.type }
        )
           

第三步：如果需要展示圖檔縮略圖

這裡使用antd的upload元件

upload元件需要通過fileList來展示縮略圖，fileList的格式為
 fileList=[
 	{
 	originFileObj：File格式檔案,
 	File檔案的所有參數,
 	//如果需要的話，還需要一個圖檔base64格式
 	 thumbUrl：getBase64(file.originFileObj)
 	}
]
擷取base64格式方法
 function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
           

var fileList = []
let obj = {
   ...files,
   originFileObj: files,
   //thumbUrl：getBase64(file.originFileObj)
   }
fileList.push(obj)
this.setState({ fileList: fileList })