ElementUI图片上传 回显

html内容

        
          
            
              
            点击上传
            
注：只能上传jpg/png文件，图片尺寸必须377mm x 60mm, 且不超过500KB
            
            

            
              
              
          
          
        

针对up-load组件，官网有详细的解释文档，可以看这里

我大概解释下用到的属性事件等

name ： 为上传的文件字段名

action ： 为文件的上传地址，可以在data中定义，mounted钩子函数中对其赋值，写入后端给定的一个地址即可

data () {
    return {
        action: ''
    }
},
mounted () {
    this.action = process.env.BASE_API + '/upload/dept/logo'
    // process.env.BASE_API为config文件下开发环境BASE_API配置地址
    // 或者也可以这样写 this.action = 'http://......'

on-success ： 为文件上传成功时调用的函数

uploadSuccess(res) { // 图片上传成功后即调用的函数
      console.log('图片上传成功' + JSON.stringify(res))
      if (res.code === 0) {
        // sysUser为form表单对象，当上传成功后，后端会动将图片存储在数据库，数据库会自动为该图片生成一个名字，
        // 提交form表单时需要向后台发送服务器生成的图片名的字段
        this.sysUser.logoImg = res.data.uploadUrl
        // 图片上传成功之后可以拿到服务器生成的图片名，赋值给表单对象，提交时再传递给后台
        // console.log('上传到服务器照片名' + this.sysUser.logoImg)
        this.$message({
          message: '上传成功',
          type: 'success',
          duration: 1000
        })
        // 上传成功后为当前页面中的img赋值src，即照片回显（回显的地址是后台传递给前端的）
        this.imgShow = true
        this.imgSrc = process.env.UPLOAD_API + res.data.uploadUrl
        // console.log(this.imgSrc)
      } else {
        this.$message({
          message: res.msg,
          type: 'error',
          duration: 1000
        })
        // this.$message.error(res.msg)
      }
      this.confirmLoading = false
      this.$refs.upload.clearFiles()
    }

multiple ： 表示是否支持多选文件

limit ： 为最大允许上传个数

show-file-list ： 表示是否显示已上传文件列表

on-exceed ： 为文件超出个数限制时执行的函数

handleExceed(files, fileList) { // 文件超出个数限制的钩子
      console.log(files)
      console.log(fileList)
      this.$message({
        message: `当前限制选择1个文件，本次选择了 ${files.length}个文件，共选择了${files.length + fileList.length}个文件`,
        type: 'warning',
        duration: 1000
      })
    }

on-progress ： 为文件正在上传时执行的函数

uploading() { // 文件上传时的钩子
     console.log('正在上传...')
     this.confirmLoadig = true
}

file-list ： 为上传的文件列表

before-upload： 为上传文件之前的钩子，参数为上传的文件

beforeAvatarUpload(file) { // 上传文件之前的钩子,限制用户上传的图片格式和大小
      var _this = this
      return new Promise(function(resolve, reject) {
        var reader = new FileReader()
        reader.onload = function(event) {
          var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
          const extension = testmsg === 'jpg'
          const extension2 = testmsg === 'png'
          const isLt2M = file.size / 1024 / 1024 < 0.5
          if (!extension && !extension2) {
            _this.$alert('上传文件只能是 jpg、png格式!', '提示', { confirmButtonText: '确定' })
            reject()
          }
          if (!isLt2M) {
            _this.$alert('上传文件大小不能超过 500KB!', '提示', { confirmButtonText: '确定' })
            reject()
          }
          var image = new Image()
          image.onload = function() {
            var width = this.width
            var height = this.height
            // console.log(width)
            // console.log(height)
            if (width > 378 || width < 376) {
              _this.$alert('图片尺寸必须377 x 60mm !', '提示', { confirmButtonText: '确定' })
              reject()
            } else if (height > 61 || height < 59) {
              _this.$alert('图片尺寸必须377 x 60mm !', '提示', { confirmButtonText: '确定' })
              reject()
            } else {
              resolve()
            }
          }
          image.src = event.target.result
        }
        reader.readAsDataURL(file)
      })
      // return extension || extension2 && isLt2M
    }

这里面涉及一个 FileReader，详情可以看这里

我当时涉及的问题就是后端与前端的配合，因为有测试地址和正式地址的区别，所以需要确认好上传的具体路径，

还有就是后端需要确认上传的文件夹确实存在，细节问题一定要注意好。