<el-upload
   class="avatar-uploader"
   action="123"
   :http-request="upLoad"(自定义上传)
   :show-file-list="false"
   :on-success="handleAvatarSuccess"
   :before-upload="beforeAvatarUpload">
   <img :src="imgurl" alt="">
   <el-button size="small" type="primary">点击上传</el-button>
</el-upload>


imgurl: '',
// 自定义上传图片
    upLoad (file) {
      var nikename = sessionStorage.getItem('nikename')
      const formData = new FormData()
      formData.append('file',file.file)
      formData.append('nikeName',nikename)
      this.axios.post(`/admin/file`,formData).then(res => res.data)
      .then(data => {
        console.log(data)
        if(data.code === 200){
          this.imgurl = data.data[0]
        }
      })
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

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

可以自定义参数,加别的参数一起上传。如果要修改的话,

if (data.code === 200) {
  this.list = data.data
  this.imgurl = this.list[0].photo
}

在页面加载出来的时候先获取头像

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐