Vue + VantUI Uploader 上传组件， 实现上传功能， 但 手机实时上传照片只回显， 上传不上去 。

Question

电脑浏览器 没有任何问题
手机上操作， 就会出现图片上传不上去， 也没有报错， 怀疑是 没有触发上传事件 ， 但又 不知道如何修改， 求大神给个 建议。。

来个Demo 那就好极了

这是前端 页面

 <div v-if="page==6">
      
        <van-uploader :after-read="onRead" accept="image/*" multiple>
          <div style="margin-top:40px; margin-left:70px;" >
            <img :src="headerImg" style="width:222px;height:300px;" :model="resume.imagePath"  >
          </div>
        </van-uploader>

      <div class="bottomNavigation">
        <van-nav-bar left-text='上一步'  right-text="提交" @click-left="leftPhoto"  @click-right="sumbit" />
      </div>
    </div>

这是 js 部分 往后端传 ， 切显示图片的

// 图片上传
    onRead(file) {
      console.log(file);
      console.log('红红火火恍恍惚惚',file.file);
      this.headerImg = file.content;
      this.$axios.post("http://192.168.1.241:3721/api/qrresume/savePicture", {
        file: file,filename: this.resume.applyerName
      }).then(resp => {
        if (resp.status == 200) {
          if (resp.data.status == 200) {
            this.resume.imagePath = resp.data.data;
          } else {
            this.$Message.error("图片上传失败,请重新上传!");
          }
        }
        
      })
    },

这是后端路路由

//保存图片
  router.post('/savePicture', async (ctx) => {
    let base64 = ctx.request.body.file.content;
    let filename = ctx.request.body.filename;
    let newFileName = Date.now() + "-" + filename + ".jpg";

    var base64Data = base64.replace(/^data:image\/\w+;base64,/, "");
    var dataBuffer = new Buffer(base64Data, 'base64');
    try {
      fs.writeFile(`public/upload/photos/${newFileName}/`, dataBuffer, function(err) {});
    
      ctx.body = {
        data: newFileName
      }
    } catch (error) {
      throw error
    }
  })

Answer 1

我是这样写的，你那个应该没啥问题吧，是不是因为图片太大了，手机拍的上传一般图片比较大

<van-uploader class="img-wrapper" :after-read="setUserAvatar">
  <span class="img" :style="{backgroundImage: 'url(' + userAvatar + ')'}"></span>
</van-uploader>

setUserAvatar(file) {
    this.$toast.loading({
        forbidClick: true,
        duration: 0,
        message: '上传中...'
    })
    let avatar = file.content
    this.$axios.post(url, {
        file: avatar.replace(/data:image\/.*;base64,/, '')
    }).then(res => {
      
    })
}