element中upload单图片转base64后添加进数组,请求接口

//先上代码

<template>
<!-- data绑定的参数
    getuploadloge: [
        {
          url: '',
          name: ''
        }
      ],
 -->
<!-- 编辑操作模板
        this.uploadstatue = false
        //在父类给该upload组件添加v-if事件
        this.$nextTick(() => {
          this.uploadstatue = true
        })
        this.form = res.data
        //给upload传参
        this.getuploadloge = [
          {
            name: res.data.Name,
            url: res.data.Logo,
            status: 0
          }
        ] -->
        <!-- 新增模板
        this.uploadstatue = false
        //在父类给该upload组件添加v-if事件
        this.$nextTick(() => {
          this.uploadstatue = true
        })
        //给upload传参
        this.getuploadloge[0].name = ''
        this.getuploadloge[0].url = ''
        this.getuploadloge[0].status = 1
         -->
<!--上边的添加事件是在父类引用改子类的标签里加v-if事件,来保证组件从新加载,否则组件不会刷新-->
    <div>
     <p  >
       只能上传jpg/png文件，且不超过1024kb
     </p>
      <el-upload
        action="#"
        :auto-upload="false"
        :file-list="fileList"
        :multiple = "false"
        :limit="1"
        accept=".jpg,.jpeg,.png"
        list-type="picture-card"
        :class="{hide:hideUpload}"
        :on-change="maximg"
        :before-upload="beforeAvatarUpload"
        :on-remove="handleRemove">
        <!-- <img :src="backimg"> -->
        <i class="el-icon-plus"></i>
      </el-upload>
    </div>
 
</template>
 
<script>
export default {
  props: ['getuploadloge'],
  data() {
    return {
      hideUpload: false, //隐藏添加窗口
      dialogVisible: false, //照片模态框
      fileList: [], //图片数组
      uploaddate: [], //子组件数组
      backimg: '../../../static/images/bank_upload_logo.png'
    }
  },
  mounted() {
    //获取图片数据
    this.getupload()
  },
  methods: {
    //获取文件数据
    getupload() {
      this.uploaddate = Object.assign(this.getuploadloge)
      if (this.uploaddate[0].status === 1) {
        this.fileList.length = 0
        this.handleRemove('', this.fileList)
      } else {
        if (this.uploaddate[0].name) {
          this.fileList = this.uploaddate
          this.hideUpload = this.fileList.length >= 1
        }
      }
    },
    //文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      if ((fileList.length = 0)) {
        this.hideUpload = true
      } else {
        this.hideUpload = fileList.length >= 1
        this.$emit('uploaddate', '')
      }
    },
    handlePictureCardPreview(file) {},
    //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    maximg(file, fileList) {
      const isIMAGE = file.name.substring(file.name.lastIndexOf('.') + 1)
      const isLt1M = file.size / 1024 / 1024
      if (isIMAGE !== 'jpg' && isIMAGE !== 'png' && isIMAGE !== 'jpeg') {
        this.$message.error('上传文件只能是jpg和png格式!')
        this.fileList.length = 0
        this.handleRemove(file, fileList)
      }
      if (isLt1M > 1) {
        this.$message.error('上传文件大小不能超过 1MB!')
        this.fileList.length = 0
        this.handleRemove(file, fileList)
      }
      this.hideUpload = fileList.length >= 1
      let reader = new FileReader() //html5读文件
      //转BASE64
      reader.readAsDataURL(file.raw)
      reader.onload = e => {
        this.uploaddate = e.target.result
        //读取完毕后调用接口
        this.$emit('uploaddate', this.uploaddate)
      }
 
      return isIMAGE && isLt1M
    },
    beforeAvatarUpload(file, fileList) {
      // console.log('123465789')
    }
  },
  name: 'Upload'
}
</script>
<style>
.hide .el-upload--picture-card {
  display: none;
}
</style>
<style scoped>
</style>

//因为我的dialog写的公用组件,需要的可以看下我的其他文章.

//因为我的新增与修改是一个模态框,所以判断那一块可以自行修改.

//file-list绑定的数组格式是:File-list:[{name:名字,url:地址}]

//只要符合这个数组就可以回显.

//其中的属性代表什么官网里有详细解释,在这里就不一一解释了.

//说几个特殊点的.accept属性是点击上传按钮后,弹出的图片选择框的默认后缀.目的是为了加载迅速,如果不加此属性,点击后页面文件过多的情况下会加载很慢.

//注意:accept后面跟的不是验证,accept后面跟的不是验证,accept后面跟的不是验证,如果需要验证请在方法中写校验规则