vant -图片上传

import Vue from 'vue';

import { Uploader } from 'vant';

Vue.use(Uploader)

添加图片

<van-uploader  @delete="deleteChange" v-model="fileList" multiple :max-count="4" :after-read="afterRead" :before-read="beforeRead" capture="camera" />

1. 在data 中声明 fileList: [],

fileList 是个数组：动态绑定添加数组的每个图片的信息：其中每个对象里面的content 是我们获取的图片的base64 二进制码，需要传给后台的；

vant -图片上传

:after-read  事件在每次添加图片的时候触发；不添加不触发；

@delete 事件在每次点击删除图片的时候触发；

所以： 我们要把[图片base64二进制码，...]传给后台

fileListNewArr: [], // 上传照片base64数组

  afterRead(file) {

       this.fileListNewArr = [] ;
       if (this.fileList.length > 0 ){
         for (var i = 0 ;i < this.fileList.length ; i++){
           this.fileListNewArr.push(this.fileList[i].content)
         }
       }
 },

  deleteChange(file){

  console.log(file,"点击删除按钮开始触发,file 里面是每个删除图片的相关信息")

  this.fileListNewArr = [] ;

  if (this.fileList.length > 0 ){

    for (var i = 0 ;i < this.fileList.length ; i++){

      this.fileListNewArr.push(this.fileList[i].content)

    }

  }
},


//补充说明

beforeRead (file) { //上传之前校验

  if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
    Toast('只允许上传jpg/png格式的图片！')
    return false
  }
  return true
},

// 需要注意的是；"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD.... 

传给后端的base64码，需要去掉 data:image/jpeg;base64 部分；一般我选择后端去掉

在调用上传图片接口时进行验证:

if (this.fileListNewArr.length == 0 ){
  Toast.fail('请上传图片');
  return

}

传给后台的关于图片的参数就是

pictureList: this.fileListNewArr,


一般值得注意的是 ：

capture="camera"  需要加上，安卓或IOS 开放了相册的图片就可以直接调用;

后端返回的是  {pictureId: 209, pictureUrl: "group1/M00/13/97/CgEUdl7rE7aAEqdKAEy1PIez7yo252.jpg} 

其中 group1/M00/13/97/CgEUdl7rE7aAEqdKAEy1PIez7yo252.jpg 和 imgurl 进行拼接即可在浏览器上进行图片查看

2,修改图片上传

2-1：在图片修改之前首先要解决的是图片预览问题


如果想要图片预览，那么 v-model 绑定的list 必须是包含已经上传图片的拼接完整之后的url,而且封装后的数组里面的对象，包含 key : url ;

由于后台返回的接口是；[

{pictureId: 209, pictureUrl: "group1/M00/13/97/CgEUdl7rE7aAEqdKAEy1PIez7yo252.jpg} ,

{pictureId: 211, pictureUrl: "group1/M00/13/97/CgEUdl7rE7aAEqdKAEy1PIez7yo252.jpg}

]

则接口拿到返回结果可以对其进行处理：

this.pictureUrlArr = res.data.pictures ;  //接口返回结果

var imgUrl = "https://assettest.hzncc.cn/HncWeb/"

   this.pictureUrlArrWithImgUrl = [];  // 赋值给v-model 进行显示

   this.pictureIdsBeforeChange = [];   // 已经上传的图片的id 的汇总，之后修改有用

 for (var i = 0 ; i< this.pictureUrlArr.length ; i++){

  var obj = {};
  obj.url = imgUrl + this.pictureUrlArr[i].pictureUrl ;
  obj.pictureId =  this.pictureUrlArr[i].pictureId ;

  this.pictureUrlArrWithImgUrl.push(obj);


  this.pictureIdsBeforeChange.push(this.pictureUrlArr[i].pictureId) /*获取修改之前的已经存在的图片的ids*/

下面开始对图片进行操作：


考虑到对于修改： 1 ：不修改 2 ：混合（已经存在 & 新增） 3 ：去掉之前，只剩新增

所以和后台经过沟通，建议传 ： 1.已经存在的图片ids 的数组  2.新增图片的数组[base64编码]

所以：

同时由于如果不修改，则情况特殊不会触发 :after-read  和 deleteChange  事件所以 会在data 里面声明一个表示参数 ：

imgHasChange ：fase 表示图片未对其进行修改；

<van-uploader v-model="pictureUrlArrWithImgUrl" multiple :max-count="4" capture="camera" @delete="deleteChange" :after-read="afterRead" :before-read="beforeRead"  />

  data里面：pictureUrlArrWithImgUrl ：[],

     afterRead(file) {

       this.imgHasChange = true   //表明图片已经发生了改变,进行表示 data 里面初始化未 fase:注意

        this.pictureList = [] ; //新增图片base64数组
        this.pictureIds = [] ;  //图片id数组

       if (this.pictureUrlArrWithImgUrl.length > 0 ){

         for (var i = 0 ;i < this.pictureUrlArrWithImgUrl.length ; i++){

           if (this.pictureUrlArrWithImgUrl[i].hasOwnProperty("pictureId")){

             this.pictureIds.push(this.pictureUrlArrWithImgUrl[i].pictureId)

           }

           if (this.pictureUrlArrWithImgUrl[i].hasOwnProperty("content")){
             this.pictureList.push(this.pictureUrlArrWithImgUrl[i].content)

           }

         }


       }

},

      deleteChange(){

          this.imgHasChange = true   //表明图片已经发生了改变

          this.pictureList = [] ; //新增图片base64数组
          this.pictureIds = [] ;  //图片id数组

          if (this.pictureUrlArrWithImgUrl.length > 0 ){

                 for (var i = 0 ;i < this.pictureUrlArrWithImgUrl.length ; i++){

                  if (this.pictureUrlArrWithImgUrl[i].hasOwnProperty("pictureId")){
                       this.pictureIds.push(this.pictureUrlArrWithImgUrl[i].pictureId)

                  }

                  if (this.pictureUrlArrWithImgUrl[i].hasOwnProperty("content")){
                    this.pictureList.push(this.pictureUrlArrWithImgUrl[i].content)

                  }

             }

        }
},


 最后：调用修改接口：

if (this.pictureUrlArrWithImgUrl.length == 0 ){  //需要修改可能根据情况
  Toast.fail('请上传图片');
  return

}

pictureIds: this.imgHasChange ? this.pictureIds : this.pictureIdsBeforeChange, //图片id
pictureList:this.imgHasChange ? this.pictureList : [], //base64 如果没任何改变则 不会有新的base64的编码产生



3.如果只是对图片进行预览，无需进行编辑则

<van-uploader v-model="pictureUrlArrWithImgUrl" multiple :max-count="pictureUrlArrWithImgUrl.length" :deletable="

isDeleteShow 设置为fase ;表示不可编辑； 同时

:max-count="pictureUrlArrWithImgUrl.length"  就不会有未上传的图标在右边出现;

在此，还有一个问题尚待解决：后台返回图片，有的图片第一次返回404 ，但是第二次访问即可成功；此解决方案待分享；

vant -图片上传

相关推荐