VUE 使用 elementUI 实现文件上传
废话少说直接上代码
1、文件上传接口只要求file二进制文件,无需其他参数
// 这里是element 中的上传示例代码
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-change="onChange"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
如果你上传文件不需要传参的话,可以直接将上传路径写到action中
action=“https://jsonplaceholder.typicode.com/posts/”
2、文件上传需要file文件和其他参数
1、element 提供了 data 属性 【上传时附带的额外参数】
今天我们用另一个比较通用的方法
1、可以将 action=“#” 改成这样,取消默认上传路径。
2、通过 on-change 事件,监听添加文件事件。
3、获取 file 二进制文件。
有些事件和参数可以根据需求添加
<el-upload
class="upload-demo"
action="#"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-change="onChange" >
</el-upload>
// 可以根据后台接口要求来决定参数的类型
onChange(file) {
//通常文件上传是要用 FormData 格式的
this.formdata = new FormData()
this.formdata.append('file', file.raw)
this.formdata.append('name', this.name)
},
// this.formdata 就是要传给后台的参数了