element-ui的el-upload

<template>
  <div class="commonTemplate">
    <el-card shadow="hover">
      <el-row class="elRows">
        <el-col :span="10" class="flex-container flex-container-center-a">
          <span class="span">模板名称</span>
          <el-input v-model="templateParams.templateName" clearable placeholder="请输入模板名称" class="input" />
        </el-col>
      </el-row>
      <el-row class="elRows flex-container flex-container-center-a">
        <span class="span">头部详情图</span>
        <el-row>
          <el-upload
            :auto-upload="false"
            action=""
            list-type="picture-card"
            :on-preview="handleHeadDetailPreview"
            :on-remove="handleHeadDetailRemove"
            accept="image/*"
            :file-list="headDetailFileList"
            :on-change="handleHeadDetailChange"
          >
            <i class="el-icon-plus" />
          </el-upload>
          <!-- 图片预览的弹框-->
          <el-dialog :visible.sync="headDetailDialogVisible">
            <img width="100%" :src="headDetailDialogImageUrl" alt="">
          </el-dialog>
          <span class="imgSpan">图片建议尺寸800*800;固定显示在详情图片的头部,图片数量不限</span>
        </el-row>
      </el-row>
      <el-row class="elRows flex-container flex-container-center-a">
        <span class="span">尾部详情图</span>
        <el-row>
          <el-upload
            :auto-upload="false"
            action=""
            list-type="picture-card"
            :on-preview="handleTailDetailPreview"
            :on-remove="handleTailDetailRemove"
            accept="image/*"
            :file-list="tailDetailFileList"
            :on-change="handleTailDetailChange"
          >
            <i class="el-icon-plus" />
          </el-upload>
          <!-- 图片预览的弹框-->
          <el-dialog :visible.sync="tailDetailDialogVisible">
            <img width="100%" :src="tailDetailDialogImageUrl" alt="">
          </el-dialog>
          <span class="imgSpan">图片建议尺寸800*800;固定显示在详情图片的尾部,图片数量不限</span>
        </el-row>
      </el-row>
      <el-row :gutter="40" style="margin-bottom: 40px;display: flex;justify-content: center">
        <el-button @click="back">返回</el-button>
        <el-button type="primary" @click="saveTemplate">保存</el-button>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import '@/styles/common.css'
import { getMemberId } from '@/utils/common'
import { addDetailMapTemplate, editDetailMapTemplate } from '@/api/productManage/productDetailPicTemplate/productDetailPicTemplate'

export default {
  name: 'DetailDiagramTemplateCommonTemplate',
  data() {
    return {
      templateParams: {
        memberId: getMemberId(),
        templateId: '',
        templateName: '',
        headerPicUrl: '',
        footerPicUrl: ''
      },
      headDetailFileList: [],
      tailDetailFileList: [],
      headerPicUrlSplit: [],
      footerPicUrlSplit: [],
      headDetailDialogVisible: false,
      headDetailDialogImageUrl: '',
      tailDetailDialogVisible: false,
      tailDetailDialogImageUrl: ''
    }
  },
  created() {
    if (this.$route.meta.isEdit) {
      this.templateParams.templateName = this.$route.params.item.templateName
      this.templateParams.templateId = this.$route.params.item.templateId
      // 头部图片显示处理
      const headerPicUrl = this.$route.params.item.headerPicUrl
      this.headerPicUrlSplit = headerPicUrl.split('|||')
      this.headerPicUrlSplit.forEach(item => {
        if (item) {
          this.headDetailFileList.push({
            url: item
          })
        }
      })
      // 尾部图片显示处理
      const footerPicUrl = this.$route.params.item.footerPicUrl
      this.footerPicUrlSplit = footerPicUrl.split('|||')
      this.footerPicUrlSplit.forEach(item => {
        if (item) {
          this.tailDetailFileList.push({
            url: item
          })
        }
      })
    }
  },
  methods: {
    // 头部图片删除
    handleHeadDetailRemove(file, fileListRemove) {
      this.headDetailFileList = fileListRemove
    },
    // 头部图片预览
    handleHeadDetailPreview(file) {
      this.headDetailDialogImageUrl = file.url
      this.headDetailDialogVisible = true
    },
    // 尾部图片删除
    handleTailDetailRemove(file, fileListRemove) {
      this.tailDetailFileList = fileListRemove
    },
    // 尾部图片预览
    handleTailDetailPreview(file) {
      this.tailDetailDialogImageUrl = file.url
      this.tailDetailDialogVisible = true
    },
    // 头部图片状态改变
    handleHeadDetailChange(file, fileList) {
      this.headDetailFileList = this.headDetailFileList.splice(0, this.headDetailFileList.length)
      this.convertFile(file).then(res => {
        this.headDetailFileList.push({
          'url': res
        })
      })
    },
    // 尾部图片状态改变
    handleTailDetailChange(file, fileList) {
      this.tailDetailFileList = this.tailDetailFileList.splice(0, this.tailDetailFileList.length)
      this.convertFile(file).then(res => {
        this.tailDetailFileList.push({
          'url': res
        })
      })
    },
    // 图片转换
    convertFile(file) {
      return new Promise((resolve) => {
        let base64
        const reader = new FileReader()
        reader.readAsDataURL(file.raw)
        reader.onload = function(e) {
          base64 = e.target.result
          resolve(base64)
        }
      })
    },
    // 返回按钮
    back() {
      history.go(-1)
    },
    // 保存按钮
    saveTemplate() {
      if (!this.templateParams.templateName) {
        return this.$message.warning('请输入模板名称')
      }
      // 头部图片处理
      let strHeadDetailFileList = ''
      this.headDetailFileList.forEach(function(item) {
        strHeadDetailFileList = strHeadDetailFileList + item.url + '|||'
      })
      strHeadDetailFileList = strHeadDetailFileList.substring(0, strHeadDetailFileList.length - 3)
      this.templateParams.headerPicUrl = strHeadDetailFileList
      // 尾部图片处理
      let strTailDetailFileList = ''
      this.tailDetailFileList.forEach(function(item) {
        strTailDetailFileList = strTailDetailFileList + item.url + '|||'
      })
      strTailDetailFileList = strTailDetailFileList.substring(0, strTailDetailFileList.length - 3)
      this.templateParams.footerPicUrl = strTailDetailFileList
      if (this.$route.meta.isEdit) {
        this.editDetailMapTemplate()
      } else {
        this.addDetailMapTemplate()
      }
    },
    // 新增
    addDetailMapTemplate() {
      delete this.templateParams.templateId
      addDetailMapTemplate(this.templateParams).then(res => {
        if (res.data.code === 0) {
          this.$message.success('保存成功')
          history.go(-1)
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    // 编辑
    editDetailMapTemplate() {
      editDetailMapTemplate(this.templateParams).then(res => {
        if (res.data.code === 0) {
          this.$message.success('保存成功')
          history.go(-1)
        } else {
          this.$message.error(res.data.msg)
        }
      })
    }
  }
}
</script>

<style scoped>
.commonTemplate{
  margin-top: 20px;
  margin-bottom: 0 !important;
  padding: 0 20px 62px 20px;
}
.span{
  display: inline-block;
  width: 140px;
  text-align: right;
  padding-right: 5px;
}
.input {
  width: calc(100% - 140px)
}
.commonTemplate .elRows{
  margin-bottom: 10px;
}
.imgSpan{
  font-size: 12px;
  color: darkgray;
  margin-top: 10px;
}
/deep/ .el-upload--picture-card{
  width: 100px;
  height: 100px;
  background-color: white;
  border: 1px dashed gray;
  line-height: 100px;
  text-align: center;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail{
  width: 100px;
  height: 100px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item{
  width: 100px;
  height: 100px;
  margin-bottom: 0;
}
</style>