首页 > Web开发 > 详细

vtiger-图片上传

时间:2020-07-15 17:36:36      阅读:51      评论:0      收藏:0      [点我收藏+]

最近在做vant图片上传,简单记录下,很多东西还待完善

因为我这个是编辑图片后最后和表单数据一起用ajax进行保存的,所以用两个数组来保存新增的图片和删除的图片

newImg:新增图片
delImg:删除图片

一、使用<van-uploader>进行图片上传

<van-field :name="item.name"  :label="item.label">
         <template #input>
               <van-uploader
                  v-model="dataList[item.name].value"
                  multiple
                  :max-count=maxImgCount
                  :after-read="onRead"
                  :before-delete="delImgs"
                />
     </template>
</van-field>

<script>
export default {
data() {
return {
name:‘‘,
}
},
methods: {
      onRead(file,name) {
    if (file instanceof Array && file.length) { // 判断是否是多图上传 多图则循环添加进去
    file.forEach(item => {
  this.newImg[name.index] = item;
   })
    } else {
   this.newImg[name.index] = file;
    }
      },
    /*点击删除图片*/
    delImgs(file, name) {
  if(isNotNull(file.url))
  {
  this.delImg.push(file.url);
  }else{
  this.newImg.splice(name.index, 1);
   }
  this.dataList[‘imagename‘].value.splice(name.index, 1);
    },
      }
}
</script>

//ajax保存的时候循环下文件
this.dataList.imagedel = this.delImg;
if(isNotNull(this.newImg))
{
this.dataList.imagename=‘‘;
for (var imageitem in this.newImg) {
imagelist[‘content‘]=this.newImg[imageitem].content;
imagelist[‘imagename‘]=this.newImg[imageitem].file.name;
imagelist[‘imagetype‘]=this.newImg[imageitem].file.type;
imagelist[‘imagesize‘]=this.newImg[imageitem].file.size;
this.dataList.imagedata.push(imagelist);
}
}

二、后台处理base64图片上传

function uploadBase64Image($img,$current_id,$binFile,$upload_file_path)
{
    if (preg_match(‘/^(data:\s*image\/(\w+);base64,)/‘, $img, $result)) {
//        $type = ".".$result[2];
        $path =  $upload_file_path .$current_id . "_" . $binFile;
    }
    $img =  base64_decode(str_replace($result[1], ‘‘, $img));
    @file_put_contents($path, $img);
    return $path;
}

三、获取图片接口数据格式

技术分享图片

 

vtiger-图片上传

原文:https://www.cnblogs.com/ivy-zheng/p/13306401.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!