鍍金池/ 問答/HTML/ 在React中Antd的上傳組件獲取圖片的寬高之后怎么拼接成key提交呢？

在React中Antd的上傳組件獲取圖片的寬高之后怎么拼接成key提交呢？

代碼如下
data=(file)=>{

if(file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'){
  const suffix ="." + file.name.replace(/^.+\./,'')
  const filename = file.name.replace(suffix,"")
 var img_url = window.URL.createObjectURL(file);
  var img = new Image();
  img.src = img_url
  img.onload =function(e){
    // 打印
    var ww = img.width
    var hh = img.height
    var timestamp=new Date().getTime()
    const fileSize = ww +"*" + hh
   
    const key = timestamp + filename +"_"+fileSize +"_"+ suffix

    //這個(gè)key怎么返回呢？
    
  }

}else{
//不太確定這個(gè)是否正確？
return { token:"token",key:"key"}

}

讓這個(gè)data的格式可以成為等同這個(gè)樣子
const data={ token:'token',key:"key"}

回答
編輯回答
貓小柒

可以setState存到state里去，在upload組件里從state里取，但是你用了img的onload事件，可能是異步的，所以最終upload組件提交的時(shí)候不一定能取到這個(gè)key

2017年5月24日 13:47
編輯回答
旖襯

建議利用promise去是處理onload這個(gè)異步效果，onload完成后直接將圖片的寬高resolve出來即可

let getKey = (imgUrl,filename,suffix) => {
   return new Promise((resolve,reject)=>{
        let img = new Image();
        img.src = imgUrl;
        img.onload = ()=>{
             let w = img.width;
             let h = img.height;
             let timestamp=new Date().getTime();
             let fileSize = w +"*" + h;
               
             let key = timestamp + filename +"_"+fileSize +"_"+ suffix;
             resolve(key);
        }
        img.onerror = ()=>{
            reject()
        }
    
    
    })
}

//調(diào)用
let result= getKey("xxxx/img/a.png","pic","png");
let key;
result.then(resp=>{
    key = resp;
})
2017年10月7日 11:49