前端需要通过认证去拿后端返回的图片

后端返回图片，前端传给后端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 })