修改员工基本信息-上传图片

yz_08

2021-02-23 440d1169998fb1bfb5e71b845898deaf84eab7b0

修改员工基本信息-上传图片

 src/settings.js

@@ -23,6 +23,8 @@
    // 文件上传地址
    filesUploadUrl: 'http://120.24.23.155:8301/hr/filesUpload',
    // 个人文件上传地址
    uploadSinglePath: 'http://120.24.23.155:8301/hr/empAccessory'
    uploadSinglePath: 'http://120.24.23.155:8301/hr/empAccessory',
    // 个人文件上传地址
    getEmpBaseInfoImage: 'http://127.0.0.1:8301/hr/empBaseInfo/image/'
  }
}

 src/utils/request.js

@@ -151,7 +151,7 @@
        return tansParams(params)
      }],
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
        'Content-Type': 'multipart/form-data'
      }
    })
  },

 src/views/user/Informationinput.vue

@@ -438,7 +438,6 @@
    <el-dialog title="基本信息" :visible.sync="dialogshowArr[0].show" width="50%" class="baseinfo">
      <el-container>
        <el-aside width="200px">
          <el-input v-if="false" v-model="empBaseInfoForm.file" />
          <el-upload
            class="avatar-uploader"
            action="#"
@@ -1838,6 +1837,7 @@
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import Pagination from '@/components/Pagination'
import { pages } from '@/settings'

export default {
  components: { Treeselect, Pagination },
@@ -2529,7 +2529,7 @@
        version: ''
      },
      empBaseInfoForm: {
        file: null,
        imagePath: '',
        empId: '',
        customerId: '',
        archivesNumb: '',
@@ -2610,16 +2610,48 @@
    this.isShow(false, 0)
  },
  methods: {
    // 获取图片的Blob值
    getImageBlob(url, cb) {
      var xhr = new XMLHttpRequest()
      xhr.open('get', url, true)
      xhr.responseType = 'blob'
      xhr.onload = function() {
        if (this.status === 200) {
          if (cb) cb(this.response)
        }
      }
      xhr.send()
    },
    preView(url) {
      var this_ = this
      const reader = new FileReader()
      this.getImageBlob(url, function(blob) {
        reader.readAsDataURL(blob)
      })
      reader.onload = function(e) {
        // 获取bolb里面数据时,生成预览
        var img = document.createElement('img')
        img.src = e.target.result
        this_.empBaseInfoForm.imagePath = e.target.result
      }
    },
    // 图片预览
    handlePictureCardPreview(file) {
      const fileName = file.name
      const regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/
      if (regex.test(fileName.toLowerCase())) {
        var reader = new FileReader()
        reader.readAsDataURL(file)
        this.empBaseInfoImageUrl = URL.createObjectURL(file.raw) // 获取URL
      // 判断图片大小
      if (file.size < 4400000) {
        // 判断图片格式是否为jpg,png,jepg,gif
        var fileName = file.name
        // var suffixIndex=fileName.lastIndexOf(".")
        // var suffix=fileName.substring(suffixIndex+1).toUpperCase()
        var suffix = fileName.substring(fileName.lastIndexOf('.') + 1).toUpperCase()
        if (suffix === 'JPG' || suffix === 'JPEG' || suffix === 'PNG') {
          this.preView(this.empBaseInfoImageUrl)
      } else {
        this.$message.error('请选择图片文件')
          this.$message.error('文件类型不正确,请重新上传！')
        }
      } else {
        this.$message.error('图片大小超过4M,请重新上传')
      }
    },
    // 翻页插件翻页方法
@@ -3422,6 +3454,8 @@
      this.empBaseInfoForm.modifier = ''
      this.empBaseInfoForm.delFlag = ''
      this.empBaseInfoForm.version = ''
      this.empBaseInfoForm.imagePath = ''
      this.empBaseInfoImageUrl = ''
    },
    editEmpBase(row) {
      this.isAdd = false
@@ -3472,6 +3506,7 @@
      this.empBaseInfoForm.delFlag = row.delFlag
      this.empBaseInfoForm.version = row.version
      this.dialogshowArr[0].show = true
      this.empBaseInfoImageUrl = pages.getEmpBaseInfoImage + row.empId
    },
    putEmpBase(formName) {
      this.$refs[formName].validate((valid) => {