手机端 vant 列表直接拍照, 传参 对应数据 id

在这里插入图片描述

   <van-list>
    <van-cell v-for="(item,index) in list" :key="item.value">
      <van-col style="text-align: center;padding-top: 4rem;" span="8">${item.text}</van-col>
      <van-col style="text-align: center" span="10">
        <van-empty :image="item.pic" image-size="100">


        </van-empty>
      </van-col>
      <van-col style="text-align: -webkit-right;height: 3rem;line-height:1rem;border-radius: 20px;margin: 5px;padding-top: 4rem;" span="4">
{{--        <van-button size="mini" type="danger" @click="listIndexImg($event,item.value)">拍照</van-button>--}}
{{--        <van-button size="mini" type="danger" @click="takephoto($event,item.value)">拍照</van-button>--}}

        <van-field  name="uploader">
          <template #input>
            <van-uploader
                    :after-read="(file) => saveBaseImage(file, item)"
                    :before-delete="(file, detail) => beforeDelete(file, item, item.code, detail) // 删除图片
                      "
                    preview-size="50"
                    preview-image="true"
                    v-model="fileList"
                    capture="user"
                    :max-count="1"
                    style="width: 50px; height: 50px;">
              <van-button size="mini" type="danger">拍照</van-button>
            </van-uploader>

          </template>
        </van-field>


      </van-col>
    </van-cell>
  </van-list>
        listIndexImg(e,id)
        {
            if (id == undefined) {
                id = ""
                return
            }
            //   window.location.href = "/equipment/equipmentImg?id=" + id
        },

        takephoto(e,id){
            var that = this;
            that.baseid = id;
            that.showBase = true;
        },


  //上传图片
      saveBaseImage(file, item) {
        var that = this;
        console.log(item)
        // $.showPreloader('图片上传中');
        that.$notify('图片上传中');
        lrz(file.file)
                .then(function (rst) {
                  var _token = '{{csrf_token()}}';
                  rst.formData.append('baseid', item.value);
                  rst.formData.append('base64img', rst.base64);
                  rst.formData.append('_token', _token);
                  $.ajax({
                    url:"/equipment/baseSaveImage",
                    type: 'POST',
                    dataType: 'json',
                    data: rst.formData,
                    processData: false,
                    contentType: false,
                    xhrFields: { withCredentials: true },
                    headers: {
                      'Access-Control-Allow-Origin': '*',
                      'Access-Control-Allow-Credentials': 'true'
                    },
                    success: function(res){
                      // that.pic_url = res.images;

//                      item.pic = res.images;
//                       window.location.href =  "/equipment/equipmentBase";
                      window.location.reload();

                      // $.alert('上传成功');
                      // $.hidePreloader();
                    },
                    error: function(){
                      that.$notify('上传失败');
                      //$.alert('上传失败');
                      //$.hidePreloader();
                    }
                  });
                })
                .catch(function (err) {
                  //$.alert('上传失败');
                  that.$notify('上传失败');
                });
      },

beforeDelete (file, item, name, detail) {
  const urlList = item.images.split(',');
  urlList.splice(detail.index, 1);
  (fileList.value as any)[name].splice(detail.index, 1);
  item.images = urlList.join(',');
} ,
  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值