elementUI 上传组件 http-request (覆盖默认的上传行为,可以自定义上传的实现)使用
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
elementUI 上传组件很方便我们上传个种类型的文件,但是一般我们的请求都是自己配置的,通过 action="url"
传入上传地址就感觉不太喜欢
这时候我们就可以使用 http-request
属性来覆盖默认的上传行为(即action="url"
),自定义上传的实现
html代码
<el-dialog title="批量导入" :visible.sync="importDialog" width="30%">
<div class="importDialog-content">
<el-upload ref="upload"
:limit="1" <!-- 最大允许上传个数 -->
:auto-upload="false" <!-- 是否在选取文件后立即进行上传 -->
drag
:http-request="uploadFile" <!-- 覆盖默认的上传行为,可以自定义上传的实现 -->
accept='.xls,.xlsx' <!-- 接受上传的文件类型 -->
action="customize">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或
<em>点击上传</em>
</div>
<!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div> -->
</el-upload>
</div>
<span slot="footer" class="dialog-footer">
<span class="template-download">
<i class="el-icon-download"></i>格式模板下载:data.xlsx
</span>
<el-button @click="importDialog = false">取 消</el-button>
<el-button type="primary" @click="submitUpload">确定上传</el-button>
</span>
</el-dialog>
js部分
// 确认上传
submitUpload() {
this.$refs.upload.submit();
},
// 文件上传
uploadFile(params) {
console.log("uploadFile", params);
const _file = params.file;
const isLt2M = _file.size / 1024 / 1024 < 2;
// 通过 FormData 对象上传文件
var formData = new FormData();
formData.append("file", _file);
if (!isLt2M) {
this.$message.error("请上传2M以下的.xlsx文件");
return false;
}
// 发起请求
RequestUploads(formData).then(res => {
console.log("_RequestUploads_", res);
if (code === 2000) {
this.$message({
type: "success",
message: res.msg
});
// 隐藏弹出框
this.importDialog = false;
} else {
this.$message({
type: "warning",
message: res.msg
});
}
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)