使用elementUI图片上传的时候总会因为一个值而烦恼—action
这个怎么说呢,其实里面可以给空值的,只是会报一个错,其实不怎么碍事,也可以放一个接口,只不过你要考虑一个跨域的问题,如果不放就让它空着吧
1.使用elementUI的upload
这里基本就可以这样写了,如果需求不同可以看看elementUi的文档添加几个需求
<div class="upLiadImg">
<el-upload
class="avatar-uploader"
action="" //可以不写,只是会报错,不碍事,不想的话就写一个接口,有可能会跨域
:on-change="getFile" //这是事件
:limit="1" //一次只能选择一个图片文件
>
<div class="upImg">选择图片</div>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb,一次只传一次</div>
</el-upload>
</div>
2.点击选择图片触发的事件:on-change=“getFile” 和转为base64图片
// 图片转Base64
getBase64(file) {
let slef = this
//把图片转成base64编码
return new Promise(function (resolve, reject) {
let reader = new FileReader()
let imgResult = ''
reader.readAsDataURL(file)
reader.onload = function () {
imgResult = reader.result
}
reader.onerror = function (error) {
reject(error)
}
reader.onloadend = function () {
slef.ruleForm.tp = imgResult //在这里图片已经变成base64格式了,你们可以console.log(imgResult),我是放在data里面一个值里面保存起来
resolve(imgResult)
}
})
},
// 点击现在文件
getFile(file, fileList) {
//上传图片
this.getBase64(file.raw)//这里是把图片传入上面进行base64加密,你们可以consloe一下这个值
},
3.做到这步的话图片已经变成base64格式了,保存在一个值内
然后就是用自己顺便定义一个函数把值给传给后台了
不过因为base64格式的图片,是very very 长的
所以有可能get传不过去
下面我们就想想怎么传过去呢
4.base64格式图片传后端,post去传
其实没什么难的,不过新手的话,会在这里绕很长时间,下面我们就来说说把
1.使用qs这个插件,如果你安装过axios的话,就不要去npm去安装了,不然会报错的,axios里面就有qs库,只要引入就ok了—import Qs from ‘qs’(其实我就是那个sb,安装报错还以为我弄了啥导致的报错,然后看了一些大佬说安装了axios就不用安装了,直接引入就ok,哎。。。)
handleUpTo() {
let self = this
let data = {
xqbm: self.ruleForm.xqbm,
xqmc: self.ruleForm.xqmc,
ssqXzqhdm: self.ruleForm.ssqXzqhdm,
gajgjgdm: self.ruleForm.gajgjgdm,
sqdm: self.ruleForm.sqdm,
xxdz: self.ruleForm.xxdz,
wyno: self.ruleForm.wyno,
jd: self.ruleForm.jd,
wd: self.ruleForm.wd,
dtzbj: self.ruleForm.dtzbj,
jybh: self.ruleForm.jybh,
jyxm: self.ruleForm.jyxm,
jylxfs: self.ruleForm.jylxfs,
zdmj: self.ruleForm.zdmj,
jzmj: self.ruleForm.jzmj,
tp: self.ruleForm.tp,//这里是我当时存放的base64图片的地方
}
data = Qs.stringify(data) //用这个方法转变一下
self.$refs.RuleForm.validate(async (valid) => {//这里我用的element的From的验证
if (valid) {
let res = await self.$http.post('/xq/xzxq.do', data)//用post去传给后端
if (res.data.massage.status == 200) {
self.$message.success('添加成功')
self.$router.go(-1)
} else if(res.data.massage.status == 202){
self.$message.error('小区编码重复')
}else{
self.$message.error('添加失败')
}
}
})
},
推荐一位大佬说的post请求的说明,他说的不错,我就不细说了,如果有用记得回来点赞就可以了。
兄弟们过去之后记得回来给我点个赞