vtiger-图片上传

最近在做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-图片上传

 

vtiger-图片上传

上一篇:引用第三方库文件时报错LNK2001


下一篇:ftp上传工具下载,ftp上传工具到底该怎么下载?使用教程