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

后端返回图片,前端传给后端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 })
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值