|
elementUI自定义上传文件（前端后端超详细过程）
简介：自定义上传文件并与其他参数一同提交到后台(主要使用axios)
- 简单介绍组件（ upload）的属性（熟悉参数的直接略过）
总结elmentUI一下它的使用和常用属性的作用。
limit : 限制了上传文件的个数 ， 如果你上传单个文件这里设置 1 ，多个文件就别设置。
auto-upload:自动上传,在我看来，除非是单独上传文件时,
这个属性才有用,因为单独文件直接上传到后台服务器。
而我们想要自己获取到组件里的文件和其它表单数据,再上传,就需要别的办法,下面会讲。
action:这个属性是上传文件的地址,当我们指定了 auto-upload 属性，
组件就会自动按 action 的地址提交。我一般都不设置这个属性：action="none",
因为我觉得自定义的更好,拓展性强。
multiple：这个属性支持多文件上传,如果你是上传单文件这个属性随便设不设置，如果是多文件,就要设置,所以建议不动,因为它默认开启。
accept：这个就不细说了,限制类型的,当然仅限选择时的类型，用户要是想上传其它类型的文件照样有办法。
- 主要目的自定义上传文件
2.1 组件代码
<el-upload class="upload"
ref="upload"
action="string"
:file-list="fileList" //存放选择的文件
:auto-upload="false" //取消自动上传
:http-request="uploadFile" 自定义上传的方法
:on-change="handleChange" //文件选择后执行的方法
:on-preview="handlePreview" //点击显示文件（没啥用）
:on-remove="handleRemove" //移除文件
multiple="multiple">
<el-button slot="trigger"
size="small"
type="primary"
@click="delFile">选取文件</el-button>
</el-upload>
2.2 data中的属性
data(){
return{
// el-upload组件绑定的属性—— :file-list=“fileList”,渲染后fileList[index]是Object类型,而不是后台所需的File类型,
// 而这个组件已经把对应的File类型存储到了fileList[index].raw这个属性里,直接拿来用就好.
fileList: [],
// 不支持多选
multiple: false,
formData: "",
}
}
2.3 methods的方法
//点击上传文件触发的额外事件,清空fileList
delFile () {
this.fileList = [];
},
handleChange (file, fileList) {
this.fileList = fileList;
// console.log(this.fileList, "sb");
},
//自定义上传文件
uploadFile (file) {
this.formData.append("file", file.file);
// console.log(file.file, "sb2");
},
//删除文件
handleRemove (file, fileList) {
console.log(file, fileList);
},
// 点击文件
handlePreview (file) {
console.log(file);
},
- 与其他参数通过axios提交到后台
这里要使用到FormData()对文件进行存储才能提交到后台
具体实现方式:
//准备一个提交按钮
<el-button type="primary"
@click="onSubmit">保存</el-button>
提交事件:
//保存按钮
onSubmit () {
let formData = new FormData();
formData.append("file", this.fileList[0].raw);//拿到存在fileList的文件存放到formData中
//下面数据是我自己设置的数据,可自行添加数据到formData(使用键值对方式存储)
formData.append("title", this.title);
axios异步提交:
注意：使用FormData提交文件只能使用post请求
在post请求体中需要设置 “Content-Type”:
“multipart/form-data;charset=utf-8”,提醒后台数据是FormData类型
axios.post(post请求的具体路径, formData, {
"Content-Type": "multipart/form-data;charset=utf-8"
})
.then(res => {
if (res.data === "SUCCESS") {
this.$notify({
title: '成功',
message: '提交成功',
type: 'success',
duration: 1000
});
}
})
最后后台数据的接收
注意：前台传送的是FormData数据，要拿到文件要使用@RequestParam(前端存放到formData的key)
MultipartFile file进行接收
//采用PostMapping
@PostMapping(具体路径)
public String saveVue(String title,@RequestParam("file") MultipartFile file) throws IOException {
//拿到具体文件 file
return "SUCCESS";
}
介绍到这就基本完成了elmentui的自定义上传功能，记得点赞！
|