Vue+ElementUI上传组件
2018-01-10 本文已影响75人
Lia代码猪崽
这里先说明用到的Element版本1.4.12,官方文档:
http://element.eleme.io/1.4/#/zh-CN/component/upload
<el-form-item>
<span style="display: inline-block;float:left;margin-left: -100px;width: 100px;font-weight: 700;color: #48576a;text-align: right;padding-right: 10px;">附 件:</span>
<el-upload
class="upload-demo"
:action="fileAction"
:headers="myHeader"
:before-upload="beforeUpload"
:on-success="uploadSuccess"
:on-remove="beforeRemove"
name="file"
:file-list="fileList">
<div>
<el-button size="small" style="color: #409EFF;border-color: #409EFF;width: 92px;height: 34px;margin-top: -5px">选择文件</el-button>
<div slot="tip" class="el-upload__tip" style="margin-top: -7px;margin-bottom: -15px;display: inline-block;padding-left: 5px">
只能上传超过大小不超过10M的文件
</div>
</div>
</el-upload>
</el-form-item>
data() {
return {
// 上传的某个文件数据
file: "",
// 文件列表
fileList: [],
// API接口
fileAction: "",
// token在这里传就好了
myHeader: {
token: ''
}
}
},
methods: {
// 文档写的很清楚,这里就不说了
}