1.使用el-upload上传图片
// 图片上传
<el-form-item label="图片备注">
<img
v-if="addData.srcImg.length>0"
class="el-upload-list__item-thumbnail"
:src="addData.srcImg" alt=""
>
<el-upload
v-else
action=" https://jsonplaceholder.typicode.com/posts/"
:file-list="fileList"
list-type="picture-card"
:limit="1"
name="img"
:header='{ enctype: "multipart/form-data"}'
:on-change="changeUpload">
<i slot="default" class="el-icon-plus"></i>
</el-upload>
</el-form-item>
// 方法
changeUpload(file, fileList) {
this.getBase64(file.raw).then(res => {
this.addData.srcImg = res
})
this.fileList = fileList
},
// 图片转码
getBase64(file) {
return new Promise(function (resolve, reject) {
const reader = new FileReader()
let imgResult = ''
reader.readAsDataURL(file)
reader.onload = function () {
imgResult = reader.result
}
reader.onerror = function (error) {
reject(error)
}
reader.onloadend = function () {
resolve(imgResult)
}
})
},
2.后端实现
app.post("/postAdd", (request, response) => {
let sql = `insert into problems (type,problemDesc,causeAnalysis,solution,codeSnippet,originError,srcImg,createTime)
values ('${request.body.type}','${request.body.problemDesc.replace(/'/g,'"')}','${
request.body.causeAnalysis.replace(/'/g,'"')
}',
'${request.body.solution.replace(/'/g,'"')}','${request.body.codeSnippet.replace(/'/g,'"')}','${
request.body.originError.replace(/'/g,'"')
}','${request.body.srcImg}','${getNowDate()}')`;
conMysql(sql).then(() => {
let res = new Response(true, "新增成功", 200, []);
response.send(res);
});
});
这里得到的就是图片的base64编码
3.数据库设置
存储特殊字符,如+/*-