elementui利用base64实现多个图片文件的上传和下载

elementui利用base64实现多个图片文件的上传和下载:
后台接收的是一个longtext类型的字段。
以下是样式和前端的代码：

<template>
  <div class="list-content-detail">
    <XnBtn
      :modelid="modelid"
      :objid="editData.objid"
      :multiple-selection="multipleSelection"
      type="detail"
      @editMethod="edit"
    >
      <template slot="cancelactivity" slot-scope="scope">
        <span class="handle-edit" @click="cancelactivity()">作废</span>
      </template>
    </XnBtn>
    <div class="common-content">
      <fm-generate-form
        ref="generateForm"
        :data="jsonData"
        :remote="remoteFuncs"
        :slotslist="slotslist"
        :value="editData"
        related_entity="T_ACTIVITY"
      >
        <!-- action:后台上传图片接口的URL -->
        <template slot="activityimgs">
          <el-upload
            ref="upload"
            :disabled = "is_upload_delete"
            :file-list="srclist"
            :auto-upload="false"
            multiple
            :on-preview="handlePictureCardPreview"
            :on-exceed="handleExceed"
            :on-change="uploadChange"
            :on-remove="removeimg"
            list-type="picture-card"
            accept="image/jpeg,image/png"
          >
            <i class="el-icon-plus" />
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img :src="dialogImageUrl" width="100%" alt="" />
          </el-dialog>
        </template>
        <template slot="relationActivity">
          <div class="tbcol">
            <div>关联项</div>
            <div>
              <span
                v-for="(item, index) in translaterelation_string"
                :key="index"
                class="toLink"
                @click="getNonnormdetailAndShangji(item)"
                >{{ item.new_name }}
                <span v-if="index !== translaterelation_string.length - 1"
                  >、</span
                >
              </span>
            </div>
          </div>
        </template>
        <template slot="account_id_name_value">
          <div id="tbcol_account_id" class="tbcol">
            <div>客户名称</div>
            <div>{{ account_id_name }}</div>
          </div>
        </template>
        <!-- 变更记录 -->
        <template slot="activity_his" slot-scope="scope">
          <DetailListhis ref="DetailListhis" :query-id="queryId" />
        </template>
        <!-- 标题 开始时间，结束时间 -->
        <template slot="starttime_endtime" slot-scope="scope">
          <div style="font-size: 14px; color: #b7c1d2 !important">
            {{ start_time | utcDateConvert('YYYY-MM-DD HH:mm') }}&nbsp;&nbsp; 至
            &nbsp;&nbsp;{{ end_time | utcDateConvert('YYYY-MM-DD HH:mm') }}
          </div>
        </template>

        <template slot="updateby" slot-scope="scope">
          <div class="tbcol">
            <div>修改人</div>
            <div>{{ editData.updateby_value }}</div>
          </div>
        </template>

        <template slot="createdby" slot-scope="scope">
          <div class="tbcol">
            <div>创建人</div>
            <div>{{ editData.createdby_value }}</div>
          </div>
        </template>

        <template slot="content">
          <div class="tbcol">
            <div>沟通内容</div>
            <div>
              {{ editData.content }}
            </div>
          </div>
        </template>

        <template slot="coordinate">
          <div class="tbcol">
            <div>协助事项</div>
            <div>
              {{ editData.coordinate }}
            </div>
          </div>
        </template>

        <template slot="address">
          <div v-if="editData.type !== '0'" class="tbcol">
            <div>地点</div>
            <div>
              {{ editData.address }}
            </div>
          </div>
        </template>
      </fm-generate-form>
    </div>
  </div>
</template>

<script>
import { fetchPost, createData } from 'sinitek-eccrm/src/api/mvcquery'
import XnBtn from 'sinitek-eccrm/src/components/xn/TableBtn'
import DetailListhis from './compoments/detailListhis'
import UserList from './compoments/xnUserList'

export default {
  name: 'Activitydetail',
  components: {
    XnBtn,
    DetailListhis,
    UserList,
  },
  data() {
    return {
      jsonData: {},
      editData: {},
      translaterelation_string: [],
      account_id_name: '',
      remoteFuncs: {},
      formid: '357',
      modelid: 115,
      multipleSelection: [],
      start_time: '',
      end_time: '',
      slotslist: [
        { model: 'activityimgs' },
        { model: 'relationActivity' },
        { model: 'account_id_name_value' },
        { model: 'myparticatestaff' },
        { model: 'cancelactivity' },
        { model: 'activity_his' },
        { model: 'starttime_endtime' },
        { model: 'updateby' },
        { model: 'createdby' },
        { model: 'content' },
        { model: 'coordinate' },
        { model: 'address' },
      ],
      imgBase64Value: '',
      dialogImageUrl: '',
      dialogVisible: false,
      filetype: '',
      srclist: [],
      fileList: [],
      activityimageresult: [],
      is_upload_delete: false,
    }
  },
  created() {
    const id = this.$route.query.objid
    if (id) {
      this.queryId = this.$Param.getUrlParam(id)
    }
    this.queryJson()
    this.getDetail()
    this.getActivityimage()
  },
  methods: {
    refresh() {
      this.queryJson()
      this.getDetail()
      this.getActivityimage()
    },
    queryJson() {
      const arr = []
      arr.push(`id=${this.formid}`)
      fetchPost('model/formJson', arr)
        .then((result) => {
          if (result.data.json_content) {
            this.jsonData = JSON.parse(result.data.json_content)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    getDetail() {
      const arr = []
      if (this.queryId) {
        arr.push(`objid=${this.queryId}`)
      }
      this.multipleSelection = []
      fetchPost('activity/detail', arr)
        .then((result) => {
          this.translaterelation_string = result.data.translaterelation_string
          this.start_time = result.data.start_time
          this.end_time = result.data.end_time
          this.editData = result.data
          this.account_id_name = result.data.account_id_name
          if (this.account_id_name === '') {
            document.getElementById('tbcol_account_id').style.display = 'none' // 隐藏
          }
          if (result.data.state) {
            if (result.data.state === '3') {
              this.is_upload_delete = true
            }
          }

          this.multipleSelection.push(this.editData)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    handleSubmit() {
      this.$refs.generateForm
        .getData()
        .then((data) => {
          console.log(data)

          // data check success
          // data - form data
        })
        .catch((e) => {
          // data check failed
        })
    },
    edit(url) {
      var objidEncry = ''
      var objid = this.multipleSelection[0].objid
      if (objid) {
        objidEncry = this.$Param.setUrlParam(objid)
      }
      this.$store.dispatch('addJump', {
        url: `${url}`,
        path: `${this.$route.fullPath}`,
      })
      this.$router.push({
        path: url,
        query: {
          objid: objidEncry,
        },
      })
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
      console.log(file)
    },

    handleExceed() {
      this.$message.warning(`最多上传 ${this.$refs.upload.limit} 张名片!`)
    },
    uploadChange(file) {
      // const formData = new FormData()
      // formData.append('file', item.file)
      var flag = true
      const isLt200KB = file.size / 1024 > 8192
      if (isLt200KB) {
        this.$message.error('上传图片大小不能超过 8M!')
        flag = false
      }
      if (this.editData.state === '3') {
        this.$message.warning('服务记录已经作废，不能上传拜访照片')
        // 刷新数据
        this.getActivityimage()
        flag = false
      }
      const imgFile = file.raw
      if (imgFile.type !== 'image/jpeg' && imgFile.type !== 'image/png') {
        this.$message.error('上传名片的格式不正确，请重新选择!')
        flag = false
        return;
      }
      if (flag) {
        const reader = new FileReader()
        this.filetype = imgFile.type
        reader.readAsDataURL(imgFile)
        reader.onload = (res) => {
          this.imgBase64Value = res.target.result
          this.editData.activityimage = res.target.result
          this.uploadActivityImages()
        }
      } else {
        this.$refs.upload.clearFiles()
      }
    },
    removeimg(fileList) {
      if (this.editData.state === '3') {
        this.$message.warning('服务记录已经作废，不能删除拜访照片')
        // 刷新数据
      } else {
        this.deleteActivityImages(fileList)
      }
    },

    // 服务记录-拜访照片
    handleRmove(file) {
      return this.$confirm(`确定删除照片 ${file.name}？`)
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      // 重点  得到上传图片的名字
      this.ruleForm.userHeaderPicture = res.data
    },
    // 作废
    cancelactivity() {
      this.$confirm(
        '点击作废按钮，提交此记录后将不能进行任何操作，确定提交吗?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        this.editData.state = '3'
        createData('activity/editstate', this.editData)
          .then((result) => {
            this.$notify({
              title: '成功',
              message: '作废完成',
              type: 'success',
              duration: 2000,
            })
            this.getDetail()
          })
          .catch((err) => {
            console.log(err)
          })
      })
    },
    getActivityDetail() {
      const arr = []
      if (this.queryId) {
        arr.push(`objid=${this.queryId}`)
      }
      this.multipleSelection = []
      fetchPost('activity/detail', arr)
        .then((result) => {})
        .catch((err) => {
          console.log(err)
        })
    },
    // 查询拜访照片
    getActivityimage() {
      const arr = []
      if (this.queryId) {
        arr.push(`activity_id=${this.queryId}`)
      }
      fetchPost('activity/getActivityimage', arr)
        .then((result) => {
          if (result.data.value) {
            this.activityimageresult = result.data.value
            // 拜访照片
            let imgTmp = []
            if (this.activityimageresult.length > 0) {
              this.activityimageresult.forEach((item) => {
                if (item.activityimage) {
                  let impa = {}
                  impa.url = item.activityimage
                  impa.name = item.objid
                  impa.activityimage_id = item.objid
                  this.filetype = 'image/jpeg'
                  imgTmp.push(impa)
                }
              })
              this.srclist = imgTmp
            }
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 上传拜访照片
    uploadActivityImages() {
      createData('activity/addActivityimage', this.editData)
        .then((result) => {
          this.$notify({
            title: '成功',
            message: '上传成功',
            type: 'success',
            duration: 2000,
          })
           this.refresh()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 删除拜访照片
    deleteActivityImages(fileList) {
      if (fileList.activityimage_id) {
        this.editData.activityimage_id = fileList.activityimage_id
      }
      createData('activity/deleteActivityimage', this.editData)
        .then((result) => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000,
          })
          // this.getActivityimage()
          this.refresh()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 进入非标详情页
    getNonnormdetailAndShangji(item) {
      if (item.entityname === 'T_NONNORM') {
        const arr = []
        if (item.objid) {
          arr[`objid`] = this.$Param.setUrlParam(item.objid)
        }
        this.$router.push({
          path: '/nonnorm/detail',
          query: arr,
        })
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.tbcol {
  word-break: break-all;
}
/deep/    .el-upload-list__item {
        transition: none !important;
    }
</style>