vue express elment-ui上传图片然后回显

template


模拟上传2


<el-button class=“btn” size=“small” type=“primary” @click=“upload”>确定上传2


data： url:’’

methods：upload(){
const formData = new FormData()
const reader = new FileReader()
const file = this.$refs.upload.uploadFiles[0]//得到上传的文件 const headerConfig = { headers: { 'Content-Type': 'multipart/form-data' }} if (!file) { // 若未选择文件 alert('请选择文件') return } formData.append('file', file.raw)//将文件推到formdata中 this.$refs.upload.uploadFiles[0]//得到上传的文件constheaderConfig=headers:′Content−Type′:′multipart/form−data′if(!file)//若未选择文件alert(′请选择文件′)returnformData.append(′file′,file.raw)//将文件推到formdata中this.axios.post(’/upload’, formData, headerConfig).then(res => {//axios请求
reader.readAsDataURL(file.raw) // 读取file文件作为base64格式
reader.onload = data => {//读取完成后加载
const res = data.target || data.srcElement
// res.result 为图片的base64格式, 直接放入img标签的src中即可
this.url= res.result
}
})
}

app.post("/upload",upload.single(‘file’), function(req, res) {
// req.file 是 前端表单name==“imageFile” 的文件信息（不是数组）

res.send(req.file.originalname);
})
使用multer库上传文件到服务器我的https://editor.csdn.net/md/?articleId=106602284中有些
自己做成功了，不得不说遇到了很多坑，开始做的时候是上传到服务器，服务器返回了一个地址但是这个地址由于是动态的require进来老师报找不到module的错误，在网上找了很久都没有找到解决方法后来发现直接读取img base64就可以了当然了存到数据库的还是服务器那边的路径。新手在vue的坑上跌跌撞撞，做成功了赶紧记录下来。