From 440d1169998fb1bfb5e71b845898deaf84eab7b0 Mon Sep 17 00:00:00 2001
From: yz_08 <yz_0812@outlook.com>
Date: 星期二, 23 二月 2021 17:20:53 +0800
Subject: [PATCH] 修改员工基本信息-上传图片
---
src/utils/request.js | 2 +-
src/settings.js | 4 +++-
src/views/user/Informationinput.vue | 53 ++++++++++++++++++++++++++++++++++++++++++++---------
3 files changed, 48 insertions(+), 11 deletions(-)
diff --git a/src/settings.js b/src/settings.js
index 6a06720..4689c8b 100644
--- a/src/settings.js
+++ b/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/'
}
}
diff --git a/src/utils/request.js b/src/utils/request.js
index 75bb94c..b5a9b2d 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -151,7 +151,7 @@
return tansParams(params)
}],
headers: {
- 'Content-Type': 'application/x-www-form-urlencoded'
+ 'Content-Type': 'multipart/form-data'
}
})
},
diff --git a/src/views/user/Informationinput.vue b/src/views/user/Informationinput.vue
index e7b1ed3..c41467e 100644
--- a/src/views/user/Informationinput.vue
+++ b/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
+ 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('文件类型不正确,请重新上传！')
+ }
} else {
- this.$message.error('请选择图片文件')
+ 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) => {
--
Gitblit v1.8.0