常规用法
<template>
<g-dialog
@confirm="confirm" //点击确认
:dialogVisible.sync="dialogVisible"
width="460"
:center="true"
title="导入扫描件"
:isUpload="true"> //是否上传,上传的话手动关闭dialog,否则上传清空数组会失败
<el-upload
action="api.php/mistakeTitle/addTitleAnnex"
ref="upload"
class="upload-demo"
:on-change="onChange" //文件发生改变
:on-progress="onProgress" //上传时
:on-success="onSuccess" //上传成功
:on-error="onError" //上传失败
:on-remove="onRemove" //文件移除
drag //拖动
accept=".zip" //文件格式
:file-list="fileList" //文件数组
:limit="1" //文件个数
:auto-upload="false" //自动上传
:headers="httpHeader" //附带请求头
:data="{title_id,student_id}" //附带参数
>
</g-dialog>
</template>
<script>
import { Loading } from "element-ui";
export default {
data() {
return {
httpHeader: {
token: localStorage.getItem("token"),
uid: localStorage.getItem("uid")
},
dialogVisible:false,
fileList: [], //上传文件
Loading: "" //Loding实例
};
},
methods: {
//这里限制上传格式或者大小
uploadChange(file, fileList) {
this.fileList = fileList;
var type = file.name.substring(file.name.lastIndexOf(".") + 1);
let flag = type === 'image/jpeg'||'image/gif'||'image/png';
if (!flag) {
this.fileList = [];
this.$message.warning("请上传zip格式文件");
}
return flag;
},
//开启弹框
onProgress() {
this.Loading = Loading.service({
text: "正在上传中",
background: "rgba(255, 255, 255, 0.5)",
target: "body"
});
},
//上传成功,这里才手动关闭dialog
uploadSuccess() {
this.Loading.close();
this.fileList = [];//清空数组
this.$refs.upload.clearFiles();//清空已上传的文件
this.$message.success("操作成功");
this.dialogVisible = false;
//重新发送获取表格
this.onSubmit();
},
uploadError() {
this.Loading.close();
this.$message.success("操作成功");
this.dialogVisible = false;
},
uploadRemove(file, fileList) {
this.fileList = fileList;
},
//当弹窗点击确定,手动调用upload上传功能
confirm() {
this.$refs.upload.submit();
}
}
};
</script>
二次封装upload组件
实现功能
- 自定义手动上传服务器
- 可以根据文件数量隐藏图片上传按钮
- 可根据type属性切换不同上传样式
- 父组件通过手动调用函数
this.$refs.upload.manualUpload()
完成上传 - 父组件通过success事件,接受上传成功后返回的参数
- 可以使用插槽自定义样式
<template>
<div>
<el-upload
ref="upload"
:class="{'hide':hideUpload}"
:limit="limit"
:action="url"
:auto-upload="auto"
:http-request="uploadFile"
:list-type="type"
:file-list="fileList"
:on-change="onChange"
:on-remove="onRemove"
:on-progress="onProgress"
:on-success="onSuccess"
:on-error="onError"
v-bind="$attrs"
v-on="$listeners"
:drag="type==='drag'"
>
<slot>
<template v-if="type==='picture-card'">
<i class="el-icon-plus"></i>
</template>
<template v-if="type==='button'||type==='picture'">
<el-button size="small" type="primary">点击上传</el-button>
</template>
<template v-if="type==='drag'">
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处,或
<em>点击上传</em>
</div>
</template>
</slot>
<div v-if="tip" slot="tip" class="el-upload__tip">{{tip}}</div>
</el-upload>
</div>
</template>
<script>
export default {
name: "g-upload",
inheritAttrs: false,
props: {
url: {
type: String,
default: "https://jsonplaceholder.typicode.com/posts/"
},
auto: {
type: Boolean,
default: false
},
//text/picture/picture-card/button/drag
type: {
type: String,
default: "picture-card"
},
//数量
limit: {
type: Number,
default: 1
},
//提示
tip: {
type: String
}
},
data() {
return {
hideUpload: false, //控制显示隐藏
fileList: [],
formData: ""
};
},
methods: {
onChange(file, fileList) {
this.hideUpload = fileList.length >= this.limit;
},
onRemove(file, fileList) {
this.hideUpload = fileList.length >= this.limit;
},
onProgress() {},
// 自定义上传函数
uploadFile(file) {
this.formData.append("file[]", file.file);
},
//手动上传按钮触发函数 this.$refs.upload.manualUpload()
manualUpload(data) {
this.formData = new FormData();
this.$refs.upload.submit(); // 触发上传
Object.keys(data).forEach(key => {
this.formData.append(key, data[key]);
});
let res = this.$axios.post(this.url, this.formData, {
headers: { "Content-Type": "multipart/form-data" }
});
this.hideUpload = false;
this.$refs.upload.clearFiles();
res
.then(res => {
this.$emit("success", res);//父组件可在该事件中关闭弹框等操作
this.$message.success("上传成功");
})
.catch(err => {
console.log("err =", err);
});
},
//在自定义上传事件的.then和.catch中 无需再使用下面函数
onSuccess() {},
onError() {}
}
};
</script>
<style lang="scss" scoped>
/deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail {
auto;
height: auto;
max- 100%;
max-height: 100%;
}
/deep/ .hide .el-upload--picture-card {
display: none;
}
</style>
使用实例
<template>
<div>
<div @click="manualUpload">手动上传</div>
<g-upload
:limit="3"
tip="12122"
@success="success"
url="mistakeTitle/uploadTopic"
ref="upload"
>
<el-button size="small" type="primary">点击上传</el-button>
</g-upload>
</div>
</template>
<script>
export default {
data() {
return {
flag: false,
//附带的参数
param: {
num_id: 1667
}
};
},
created() {},
methods: {
manualUpload() {
this.$refs.upload.manualUpload(this.param);
},
success(res) {
console.log("res =", res);
}
}
};
</script>
<style lang="scss" scoped>
</style>