前言：使用element上传图片之后，文件file下的url是blob：http//localhost：8080地址，后端不好处理


问题如上图所示

采用比较笨的js解决方法，将bolb文件打开，读取src属性(这是一个base64的数据流)，把src的内容一起发送给后端。

这是一个上传图片子组件demo


点击上传


export default {
name: 'regShopImg',
data () {
return {
imageUrl: '',
imgthing: {}
}
},
props: ['imgN', 'nameN'],
methods: {
changeUpload (file, fileList) {
console.log(file)
// 判断图片大小
if (fileList[0].size < 1100000) {
// 判断图片格式是否为jpg,png,jepg,gif
var fileName=fileList[0].name
// var suffixIndex=fileName.lastIndexOf(".")
// var suffix=fileName.substring(suffixIndex+1).toUpperCase()
var suffix = fileName.substring(fileName.lastIndexOf(".")+1).toUpperCase()
if (suffix=="BMP"||suffix=="JPG"||suffix=="JPEG"||suffix=="PNG"||suffix=="GIF") {
this.fileList = fileList
this.$nextTick(
() => {
var i = this.imgN
let uploadLists = document.getElementsByClassName('el-upload-list')
let uploadListsN = uploadLists[i]
let uploadListLi = uploadListsN.children
uploadListsN.setAttribute('style', 'position: absolute;height: 160px;margin-top: 0;margin-left: 300px;width: 260px;overflow: hidden')
let liA = uploadListLi[0]
// 试着获取bolb里面的数据------------S
//获取图片的Blob值
function 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()
}
function preView(url){
let reader = new FileReader()
getImageBlob(url, function(blob){
reader.readAsDataURL(blob)
})
reader.onload = function(e) {
// 获取bolb里面数据时,生成预览
var img = document.createElement("img")
img.src = e.target.result
// 获取bolb里面数据时,生成预览
let imgElement = document.createElement('img')
imgElement.setAttribute('src', fileList[0].url)
imgElement.setAttribute('style', 'max-width:100%;padding-left:0')
if (liA.lastElementChild.nodeName !== 'IMG') {
liA.appendChild(imgElement)
}
// 把base64的信息放到imgthing的file里
file.base64 = e.target.result
}
}
preView(fileList[0].url)
// 试着获取bolb里面的数据-------------E
// 不获取bolb里面数据时,生成预览
// let imgElement = document.createElement('img')
// imgElement.setAttribute('src', fileList[0].url)
// imgElement.setAttribute('style', 'max-width:100%;padding-left:0')
// if (liA.lastElementChild.nodeName !== 'IMG') {
// liA.appendChild(imgElement)
// }
}
)
// 修改nameN名字对应的数据,在一个页面使用多个不同字段图片上传，为了复用组件
if (this.nameN === 'identityCard_Z') {
this.imgthing.identityCard_Z = file
}
if (this.nameN === 'identityCard_F') {
this.imgthing.identityCard_F = file
}
if (this.nameN === 'identityCard_S') {
this.imgthing.identityCard_S = file
}
this.$emit('imgthing', this.imgthing)
} else {
this.$message.error('文件类型不正确,请重新上传！')
}
} else {
this.$message.error('图片大小超过1M,请重新上传')
}
}
}
}
// 上传
.upload-demo{width:260px;height:160px;
.upload_btn{width:260px;height:160px;background:#f2f2f2}
.el-upload__tip{margin:0;float:left}
}

父组件上传demo



提 交 资 质



import RegShopImg from '@/components/common/regShopImg' //上传图片的子组件
import Qs from 'qs' // post方式下引入qs插件字符串化传输信息
export default {
name: 'regShop',
data () {
return {
active: 3, // 分步骤走的判定
ajaxRegisterUrl: '', // 注册提交页面
imgN: '', // 上传信息的名字对应的index序号
nameN: '', // 上传信息的名字
identityCard_Z: 'identityCard_Z',
identityCard_F: 'identityCard_F',
identityCard_S: 'identityCard_S',
Imgthing: {}, //子组件上传的信息
ruleForm: { // 提交信息的表单对象
identityCard_Z: '',
identityCard_F: '',
identityCard_S: '',
},
rules: { // 必填判定规则
identityCard_Z: [
{required: true, message: '请上传身份证正面图片', trigger: 'blur'}
],
identityCard_F: [
{required: true, message: '请上传身份证反面图片', trigger: 'blur'}
],
identityCard_S: [
{required: true, message: '请上传手持身份证图片', trigger: 'blur'}
]
}
}
},
methods: {
// 第三步：证件照片上传
imgthing (imgthing) {
// 合并对象
this.Imgthing = Object.assign(this.Imgthing, imgthing)
// 填充到ruleForm对应项,用来判断是否有数据
this.ruleForm.identityCard_Z = this.Imgthing.identityCard_Z
this.ruleForm.identityCard_F = this.Imgthing.identityCard_F
this.ruleForm.identityCard_S = this.Imgthing.identityCard_S
},
// 总表单提交
submitForm (formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
// 由于base64的数据流比较大,get方式放不下,必须采用post方式
let data = Qs.stringify(this.ruleForm)
this.$ajax.post(this.ajaxRegisterUrl, data)
.then((res) => {
console.log(res)
if (res.status === 1) {
this.$message.success('恭喜您,注册成功！')
}
})
} else {
this.$message.error('提交资料有误,注册失败！')
return false
}
})
}
},
components: {
'RegShopImg': RegShopImg
}
}


多添加了一个base64的数据

另一种思路是利用element已有的方式，将图片上传和表单上传分开。

图片上传只上传文件，利用上传成功handleAvatarSuccess(res, file)的方法，获取后端对上传图片存储位置的路径，并将其传给父组件。提交表单的时候，提交图片部分仅仅是路径。