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

最新推荐文章于 2024-11-22 15:32:33 发布

weixin_30340819

最新推荐文章于 2024-11-22 15:32:33 发布

阅读量286

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/maruihua/p/11038322.html

博客分享了公用dialog组件文件上传的代码，提到新增与修改用一个模态框时判断部分可自行修改，file - list绑定数组格式及回显条件。还指出.accept属性可加快图片选择框加载速度，且该属性非验证，需验证要在方法中写规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//先上代码

<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>