element-ui —— 照片墙

<template>

	<!--上传图片,
        file-list：照片墙需要展示的数据来源，【数组：元素务必要有 name、url 属性值】
        :on-remove 删除照片，需要收集数据 -->

	<el-upload 
		action='/api/admin/product/fileUpload'  //真实服务器上传图片接口
		list-type="picture-card"				//默认这样就行
	    :file-list=spuImageList					// data里的照片墙数据来源，注意元素要有 name、url字段
	    :on-preview="handlePictureCardPreview"	//照片墙图片放大
	    :on-remove="handleRemove"				//删除照片墙照片
	    :on-success="handleSuccess" >			//照片上传成功
	    <i class="el-icon-plus"></i>
	</el-upload>
	<el-dialog :visible.sync="dialogVisible">	//显示放大图片的弹窗控制变量
	          <img width="100%" :src="dialogImageUrl" alt="">	//放大图片的图片地址
	</el-dialog>

</template>



data(){
return{
		//照片墙放大照片控制变量、放大图片的图片地址
      	dialogVisible: false,
      	dialogImageUrl:'',

      	//存储Spu图片数据
      	spuImageList: [],
	}
}

method:{
	getSpuImageList(spu){
	  //发请求获取服务器照片墙数据时，对数据进行处理，添加 name、url字段保证可以正常展示
      let spuImageResult = await this.$API.spu.reqSpuImageList(spu.id);
      if (spuImageResult.code == 200) {
        let listArr = spuImageResult.data;
        // 通过看文档知道，照片墙显示数据如果是一组照片需要展示，数据格式就需要有 name 与 url 字段
        // 整理数据，所以需要把服务器返回的数据进行修改
        listArr.forEach(item => {
          item.name = item.imgName;
          item.url = item.imgUrl;
        });
        // 把整理好的数据赋值给data
        this.spuImageList = listArr;
      }
	}
	
	......
	
    //照片墙删除图片
    handleRemove(file, fileList) {
      // file 代表删除的那张照片，  fileList 代表照片墙上剩余的那几张图片集合
      //为什么不直接收集到 spu里面，因为照片墙收集到的数据元素里有服务器不需要的字段，如： name、url，所以暂时收集到 spuImageList
      this.spuImageList = fileList;
    },
    //放大查看照片墙图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //照片墙上传图片成功
    handleSuccess(response,file,fileList){
      //收集图片的信息
      this.spuImageList = fileList;
    },
    
    //保存 按钮：更新或者添加spu
    async addOrUpdateSpu(){
      //整理参数，发请求，因为图片收集在this.spuImageList，所以我们要把图片数据放进 spu中
      //因为 this.spu.spuImageList 需要带两字段：imgName、imgUrl
      this.spu.spuImageList = this.spuImageList.map((item)=>{
        return{
          imgName: item.name,
          //如果item中有response，说明是新添加的照片，照片网络地址在 response 里
          imgUrl:(item.response && item.response.data) || item.url,
        };
      });
      //发请求
      let result = await this.$API.spu.reqAddOrUpdateSpu(this.spu);
      this.$message.success("保存成功")
      //回到 spu,让父组件更新数据进行展示
      this.$emit('goSpu');
      //清除spuForm中刚刚收集到的数据，万能代码
      Object.assign(this._data,this.$options.data())
    },

}