upload组件二次封装及回显功能的实现

需求:app.vue给上传组件一个图片地址,该组件能回显出来

• 1:先通过父子传值将图片地址传过去
  在子组件标签定义一个属性 value=值
  子组件通过props接收 props:[“value”]
  子组件接收图片路径后,将上传组件的img标签上的imageUrl换成相应的props传参value
• 2:修复上传功能(上传成功后,图片路径没有使用上)
  通过父组件修改value的值
  1:在子组件标签绑定一个方法 @input="父组件方法"
  2:在子组件内触发父组件方法,并传递图片路径
  在图片上传成功后.触发父组件方法并传递图片路径
  this.$emit(‘input’,res.data.url)
  3:父组件接收参数,将该值传给value对应的值
• 3:使用v-model简写父组件的写法

el-upload属性介绍

• el-upload
  • action:上传接口地址
  • name:上传文件对应的参数名
  • show-file-list:是否显示文件列表
  • :before-upload:上传前的处理
    • function(file){
      • file.type:文件类型
      • file.size:文件大小(字节)
      • return boolean值 true:正常上传 false:中止上传
        }
        :on-success:“上传后处理”
        function(res,file){
        res:接口返回值
        file: file.response:接口返回值
        file.raw:上传的文件对象 type size
        }

实现

• upload.vue

<template>
  <el-upload
    class="avatar-uploader"
    :action="baseUrl+'/question/upload'"
    name="file"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="value" :src="baseUrl + '/' + value" class="avatar" />
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>

<script>
export default {
  props: ['value'],
  data () {
    return {
      imageUrl: '',
      baseUrl: process.env.VUE_APP_URL
    }
  },
  methods: {
    handleAvatarSuccess (res) {
      // window.console.log(res)
      // window.console.log(file.raw)
      // this.imageUrl = URL.createObjectURL(file.raw)
      this.$emit('input', res.data.url)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG,PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

• App.vue

<template>
  <div id="app">
    <upload :value="imageUrl" @input="inputEvent"></upload>
  </div>
</template>

<script>
import upload from '@/components/upload'
export default {
  name: 'App',
  components: {
    upload
  },
  data () {
    return {
      imageUrl: 'upload/20201127/a5892332dc3cd91b39f8b57d61411dcc.jpeg'
    }
  },
  methods: {
    inputEvent(msg){
      this.imageUrl = msg
    }
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

• 使用v-model简写父组件的写法
• App.vue

<template>
  <div id="app">
    <!-- <upload :value="imageUrl" @input="inputEvent"></upload> -->
    <upload v-model="imageUrl"></upload>
    <upload v-model="imageUrl1"></upload>
  </div>
</template>

<script>
import upload from '@/components/upload'
export default {
  name: 'App',
  components: {
    upload
  },
  data () {
    return {
      imageUrl: 'upload/20201127/a5892332dc3cd91b39f8b57d61411dcc.jpeg',
      imageUrl1: 'upload/20201127/a5892332dc3cd91b39f8b57d61411dcc.jpeg'
    }
  },
  methods: {
    // inputEvent(msg){
    //   this.imageUrl = msg
    // }
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

• 效果：