<el-form-item label="頭像" prop="csAvatar">
      <el-upload action="aaa" list-type="picture-card" :class="{ disabled: uploadDisabled }"
      :auto-upload="false" :limit="1" ref="upload" :on-change="handleChange" :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove" :file-list="fileList">
        <i class="el-icon-plus"></i>
      </el-upload>
      <!-- 預(yù)覽圖片 -->
      <el-dialog :visible.sync="dialogVisibleimg" append-to-body>
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
</el-form-item>

data(){
	return {
	   dialogVisibleimg: false,
	   dialogImageUrl: "",
	   formdata: new FormData(),
	   fileList: [],
	   addimg: [],
	   removeimg: [],
	   ruleForm: {
          csAvatar: "",
       }
	},
	methods:{
		// 添加活動展示照片
		handleChange(file, fileList) {
		  const isJPG =file.raw.type === "image/jpeg" || file.raw.type === "image/png";
		  const isLt5M = file.size / 1024 / 1024 < 5;
		  if (!isJPG) {
		    this.$message.error("上傳頭像圖片只能是 JPG 、png 格式!");
		    fileList.splice(-1, 1);//移除錯誤文件
		    return false;
		  }
		  if (!isLt5M) {
		    this.$message.error("上傳頭像圖片大小不能超過 5MB!");
		    fileList.splice(-1, 1);
		    return false;
		  }
		  this.addimg = fileList[0].raw;
		  this.ruleForm.csAvatar = this.addimg;
		},
		// 刪除活動展示照片
		handleRemove(file, fileList) {
		  console.log(fileList)
		  this.ruleForm.csAvatar = '';
		  this.formdata = new FormData();
		},
		// 活動展示照片預(yù)覽
		handlePictureCardPreview(file) {
		  this.dialogImageUrl = file.url;
		  this.dialogVisibleimg = true;
		},
		// 渲染編輯獲取id
	    apply() {
	      this.fileList = [{ url: "" }];//這里是踩坑的點(diǎn)，必須寫
	      this.fileList[0].url = res.data.csAvatar;//這里是調(diào)用接口獲取到的值 res.data.csAvatar，賦值就可以回顯了
	      //this.fileList[0].url 做的是單張圖片回顯，多張圖片回顯可以去掉[0]
	    },
	    // 提交上傳按鈕
	    submitForm(formName) {
	      this.$refs[formName].validate((valid) => {
	        if (valid) {
	          this.formdata = new FormData();
	          if(this.ruleForm.csAvatar){//新增
	            this.formdata.append("picture", this.ruleForm.csAvatar);//上傳圖片要把參數(shù)和值放在FormData里
	            //如果有其他參數(shù)，也要一并放在this.formdata里
	           /* 例：
	            this.formdata.append("csLevel", this.ruleForm.serviceLevel);
          		this.formdata.append("csMaximum", this.ruleForm.size);
          		*/
	          }
	          //上傳圖片的接口（重要看傳參部分怎么傳參）
            CustomerServiceController.add(this, this.formdata)//傳參直接傳this.formdata即可
              .then((res) => {
                if (res.success == true) {
                  this.$message.success("新建成功");
                } else {
                  this.$message.error("新建失敗");
                }
              })
              .catch((e) => {});
	        } else {
	          console.log("error submit!!");
	          return false;
	        }
	      });
	    },
	},
	computed: {
	    uploadDisabled: function () {
	      console.log(this.ruleForm.csAvatar)
	      return this.ruleForm.csAvatar !='';
	    },
	},
}

.disabled{
    .el-upload--picture-card{
      display: none;
    }
  }

computed: {
     uploadDisabled:function() {
        return this.imagelist.length >0    
     },  
},

.disabled .el-upload--picture-card {
	display: none;
}