export function uploadImgToBase64 (file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()//html5提供的一種異步文件讀取機制 
    reader.readAsDataURL(file)//將文件讀取為Base64編碼的數(shù)據(jù)URL
    reader.onload = function () {  // 圖片轉(zhuǎn)base64完成后返回reader對象
      resolve(reader)
    }
    reader.onerror = reject
  })
}

const state = reactive({
    picture: [] //這個是用來裝表單里選中的照片
})


      const imgBroadcastListBase64 = [] //用來存放轉(zhuǎn)base64后的照片，用數(shù)組是因為上傳的圖片可能不止一張
      console.log('圖片轉(zhuǎn)base64開始...')
      // 遍歷每張圖片picture 異步
      const filePromises = state.picture.map(async file => {
        //console.log(file);
        const response = await uploadImgToBase64(file.file) //調(diào)用函數(shù) 將圖片轉(zhuǎn)為base64
        //console.log(response,111);
        return response.result.replace(/.*;base64,/, '')  // 去掉data:image/jpeg;base64,
      })
      // 按次序輸出 base64圖片
      for (const textPromise of filePromises) {
        imgBroadcastListBase64.push(await textPromise)
      }
      console.log('圖片轉(zhuǎn)base64結(jié)束..., ', imgBroadcastListBase64)
      
      
      //判斷imgBroadcastListBase64是否<=1,是的話就是上傳一張圖片，否則上傳的是多張圖片
      if(imgBroadcastListBase64.length<=1){
      state.imgsStr = imgBroadcastListBase64.join()//轉(zhuǎn)字符串
      }else{
      state.imgsStr = imgBroadcastListBase64.join(',')//轉(zhuǎn)字符串并且每個值用','拼接，這樣是為了方便后面從數(shù)據(jù)庫拿到數(shù)據(jù)，將圖片又轉(zhuǎn)為之前的base64格式
      }
      //調(diào)用后端提供的接口，傳數(shù)據(jù)到數(shù)據(jù)庫里(這個只是自己編寫的后端接口，主要是為了展示傳數(shù)據(jù))
       const res = await secondGoodsAdd({
          create_time: ti,
          content_goods: state.content,
          color: state.title2,
          price: state.title3,
          tel: state.title4,
          img: state.imgsStr,//轉(zhuǎn)base64后的圖片
          concat_num: 0,
          like_num: 0,
          name_goods: state.title1
        })
         if (res.code === '80000') {
          showSuccessToast('發(fā)布成功!')
        }
        router.push('/cicle')

//我這里是在后端編寫的接口，用于展示被添加到數(shù)據(jù)庫中的所有數(shù)據(jù)
router.get('/cirleLifeLook',async(ctx,next)=>{
  try {
    const result=await userService.cirleLifeLook()
    for(let i=0;i<result.length;i++){
      var imgData=result[i].img //獲取每條數(shù)據(jù)中的照片字段
      if(imgData){
        if(imgData.indexOf(',')>-1){//存在','的話代表是多張圖片的混合的字符串
          let ans=imgData.split(',') //切割 獲得多張之前切掉data...后的base64字符串
          let s=[]
          for(let j=0;j<ans.length;j++){
            s.push("data:image/png;base64,"+ans[j])//還原每張圖片初始的base64數(shù)據(jù)
          }  
          result[i].img=s
        }else{
          result[i].img="data:image/png;base64,"+imgData //就一張圖片直接在前面拼接"data:image/png;base64,"
        }
      }
    }//到此為止，在給前端傳數(shù)據(jù)前就修改了其中每條數(shù)據(jù)里的照片地址，這樣就可以正常顯示啦
    if(result.length){
      ctx.body={
        code:'80000',
        data:result,
        msg:'獲取成功'
      }
    }else{
      ctx.body={
        code:'80005',
        data:'null',
        msg:'還沒有信息'
      }
    }
  } catch (error) {
    ctx.body={
      code:'80002',
      data:error,
      msg:'服務(wù)器異常'
    }
  }
})