ElementUI图片上传回显

html内容

<!-- 图片上传 -->
        <el-row>
          <el-col :span="24">
            <el-form-item label="LOGO" prop="logoImg">
              <el-upload
              class="upload-demo"
              ref="upload"
              name="logoImg"
              :action="action"
              :on-success="uploadSuccess"
              multiple
              :limit="1"
              :show-file-list="false"
              :on-exceed="handleExceed"
              :on-progress="uploading"
              :file-list="fileList"
              :before-upload="beforeAvatarUpload">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip" style="color:#F00">注：只能上传jpg/png文件，图片尺寸必须377mm x 60mm, 且不超过500KB</div>
            </el-upload>
            </el-form-item>

            <el-form-item v-show="imgShow">
              <!-- <span>liuweixiang</span> -->
              <img :src="imgSrc" style="width: 300px">
          </el-form-item>
          </el-col>
        </el-row>

针对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，详情可以看这里

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

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

ElementUI图片上传 回显

猜你喜欢

ElementUI图片上传回显