这是项目中经常会遇到的问题,上传和下载,下载目前还没有遇到过,以后遇到了会更新的,这次说说上传。
上传的话使用到了element里面的el-upload组件,下面先看一下代码
<el-upload :limit='1' multiple action="/index/index/updata" :on-success="handle_success">
<div style="border:1px solid #999999 ;border-style:dotted; width: 180px; height: 200px;">
<p style="text-align:center; line-height: 160px; color: #999999;" >Upload pictures </p>
</div>
</el-upload>
action:这个是后端给我们的接口,直接填写在后面
on-success:后面跟一个方法,通过这个方法我们可以获取到后端返还给我们的url,这个时候我们需要把url通过表单提交给后端,这个时候上传就成功完成了。
handle_success(res) {
console.log(res)
this.$message.success('上传成功')
console.log(res.data.url)
this.from.file=res.data.url
this.from.cover=res.data.url
}
提交给后端
release() {
this.loading = true;
request.post('index/addArticle', this.from).then(res => {
if (res.status === 'success') {
ElementPlus.ElMessage({
showClose: true, message: res.message, type: res.status
})
}
this.loading = false;
})
},
这样一个简单的上传就完成了,当然如果你对上传的图片、文档还有一些其他的要求,可以去element中查看相对应的属性进行设置。