vant上传图片(多选,直接上传到服务器)

      <div class="uploader">
        <span>图片上传</span>
        <van-uploader
          v-model="fileList"
          accept="image/*"
          :after-read="afterRead"
          multiple
        />
      </div>
 data() {
    return {
      countMax: 9,
      fileList: [],
      fileArr: [],
    }
  },
//方法
//上传图片
    afterRead(file) {
      if (!Array.isArray(file)) {
        file = [file]
      }
      for (let i = 0; i < file.length; i++) {
        let fileUrl = file[i].file
        file[i].status = 'uploading'
        file[i].message = '上传中...'
        let formData = new FormData()
        formData.append('file', fileUrl)
        this.postImg(formData, (res) => {
          console.log(res)
          if (res.status == 200) {
            file[i].url = res.data.info.url
            file[i].status = 'done'
            file[i].message = '上传成功'
            console.log(this.fileList)
          } else {
            file[i].status = 'failed'
            file[i].message = '上传失败'
            Dialog.alert({
              title: '温馨提示',
              message: '图片上传失败,请重新上传',
            }).then(() => {})
          }
        })
      }
    },
    //上传图片接口
    async postImg(formData, cb) {
      const res = await uploadImg(formData)
      cb(res)
    },
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值