<!--上傳圖片-->
          <el-upload
            ref="upload"
            :headers="headers"
            class="upload-demo"
            :class="showUpload === true ? 'show-upload-pic' : ''"
            :limit="5"
            :action="uploadUrl"
            :data="data"
            :file-list="fileList"
            list-type="picture-card"
            :on-success="handleAvatarSuccess"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-change="changeBigImg"
          >
            <i class="el-icon-plus" />
          </el-upload>
          <!--上傳圖片-->

//上傳的地址，可以根據(jù)不同的環(huán)境配置不同的跳轉地址
created() {
    if (process.env.NODE_ENV === "test" || process.env.NODE_ENV === "development") {
      this.uploadUrl = 'https://test.../common/upload_files';
    } else if (process.env.NODE_ENV === "production") {
      this.uploadUrl = 'https://operate.../common/upload_files';
    }
  },

<script>
//可以添加請求的token
import { getToken } from '@/utils/auth'
export default{
	data(){
		return{
			headers:{
				authorization: getToken()
			},
			 data: {
        		projectCode: '',
        		projectVer: '',
        		imageBits: ''
      		},
      		fileList: [],
		}
	},
}
</script>

import Cookies from 'js-cookie'

const TokenKey = 'token'

export function getToken() {
  return Cookies.get(TokenKey)
}

handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogUpload = true;
},

// 刪除文件時，將相關參數(shù)清空，進行處理操作
    handleRemove(file, fileList, response) {
      this.saveParam.urls = '';

      for (let i = 0; i < this.imgArrs.length; i++) {
        if (file.response) {
          if (this.imgArrs[i] === file.response.data[0].imgUrl) {
            this.imgArrs.splice(i, 1);
          }
        } else {
          if (this.imgArrs[i] === file.url) {
            this.imgArrs.splice(i, 1);
          }
        }
      }
      const result = this.imgList.split(",");

      for (let i = 0; i < result.length; i++) {
        if (file.response) {
          if (result[i] === file.response.data[0].imgUrl) {
            result.splice(i, 1);
          }
        } else {
          if (result[i] === file.url) {
            result.splice(i, 1);
          }
        }
      }

      this.imgListCopy = ''; // 重新賦值
      for (let i = 0; i < result.length; i++) {
        this.imgList += result[i] + ",";
        if (result[i] !== '') {
          this.imgListCopy += result[i] + ",";
        }
      }
      this.imgList = this.imgListCopy;

      if (fileList.length < 5) {
        this.showUpload = false;
      }
    },

//在文件上傳成功時，將相關參數(shù)進行賦值操作
handleAvatarSuccess(res, fileList) {
      let imgArr = '';

      imgArr = res.data[0].imgUrl;
      this.imgList += imgArr + ",";

      this.imgArrs.push(imgArr);
      if (this.imgArrs.length > 4) {
        this.showUpload = true;
      } else {
        this.showUpload = false;
      }
    },

// 上傳圖片的驗證
changeBigImg(file, fileList) {
   this.bigFileList = fileList
   this.bigFile = file
}

<style>
.show-upload-pic .el-upload--picture-card {
  display: none;
}
</style>

if (fileList.length < 5) {
    this.showUpload = false;
}

if (this.imgArrs.length > 4) {
    this.showUpload = true;
} else {
    this.showUpload = false;
}

if (this.fileList.length >= 5) {
    this.showUpload = true;
} else {
    this.showUpload = false;
}