<template>
<div>
<el-upload action="fakeaction" ref="upload"
:disabled="disabled"
:file-list="fileList"
:on-change="fileChange"
:before-upload="beforeUpload"
:http-request="submitUpload"
:on-success="success"
:drag="drag"
:multiple='multiple'
:limit="limit">
<div class="my_temp" v-if="drag">
<slot>
<i class="el-icon-upload"></i>
<div class="el-upload__text">{{title_name}}</div>
</slot>
</div>
<el-button v-else slot="trigger" size="small" type="primary" :disabled="disabled">{{title_name}}</el-button>
<div style="display:none" slot="file"></div>
</el-upload>
<div class="file_wrap">
<div class="file_item" v-for="file of fileWrap" :key="file.uid">
<i class="el-icon-document"></i>
<span>{{file.name}}</span>
<i class="el-icon-close" @click="handleRemove(file)"></i>
</div>
</div>
</div>
</template>
<script>
/**
* date 2021/8/18
* author @ddy
* @Description 文件上传组件
* @param {Array} propFile 选 文件list [{name:'',uid:'123'}]
* @param {Array} fileType 选 文件类型 ['']
* @param {String} url 选 接口调用地址
* @param {String} title_name 按钮名称
* @param {Boolean} multiple 选 是多文件上传
* @param {Boolean} drag 选 是否支持拖拽上传
* @param {Boolean} disabled 选 禁用上传
* @param {Number} limit 选 文件上传数量最大限制
* @param {Number} size 选 文件上传大小最大限制
* @param {Function} success 选 上传成功方法
* @param {Function} fileChange 选 文件上传成功或者移除后的方法 可以理解为覆盖默认文件改变的方法
* @use <upload-file :propFile="[{name:'',uid:'123'}]" url="api/dd" :limit="1" :disabled="fileDisabled" @fileChange="submitUpload" @success="success"/>
*/
import { UploadFile } from "@/utils/require"
export default {
name:'UploadFile',
props:{
propFile:{
type: Array,
default: () => []
},
multiple:{
type: Boolean,
default: false
},
drag:{
type: Boolean,
default: false
},
limit:{
type: Number,
default: 1
},
disabled:{
type: Boolean,
default: false
},
url:{
type: String,
default: ''
},
title_name:{
type: String,
default: '选择附件'
},
fileType:{
type: Array,
default:()=>['pdf','doc','docx']
},
size:{
type: Number,
default: 20
}
},
watch:{
propFile:{
handler:function(val,old){
this.$nextTick(()=>{
this.fileWrap=val||[];
this.fileList=val||[];
})
},
immediate:true,
deep:true
}
},
data() {
return {
fileWrap:[],
fileList:[]
}
},
methods:{
beforeUpload(file){
let name=file.name.substring(file.name.lastIndexOf('.')+1);
const isJPG =!this.fileType.length||this.fileType.indexOf(name)>-1;
const isLt2M = file.size / 1024 / 1024 < this.size;
if (!isJPG) {
let str=this.fileType.map(item=> '.'+item).join(" ")
this.$message.error('上传文件只能是 '+str+'格式 !')
this.handleRemove(file)
return false
}
if (!isLt2M) {
this.$message.error('上传文件大小不能超过 '+this.size+'MB!')
this.handleRemove(file)
return false
}
},
fileChange(file, fileList){//上传文件时限制格式
},
handleRemove(file) {//删除文件
//无论是新上传的还是编辑回显的文件,file的uid都是他的唯一标识id,但是传入回显数据时要对数据绑定赋值uid字段,要不然这边file找不到
this.fileList=this.fileList.filter(item=>item['response']&&item['response']['annex_id']!=file['uid']);
this.getImg();
},
success(response, file, fileList){
this.fileList=fileList;
this.getImg();
},
submitUpload(file) {//上传到服务器
let params = new FormData()
params.append('file',file.file)
UploadFile(params,{url:this.url}).then(res => {
if(res.errno===0&&!!res.data){
this.$message.success('上传成功')
this.$emit('success',res.data);
file.onSuccess(res.data[0])
}else{
this.$message.error(res.errmsg)
}
}).catch(err => {
this.$message.error(err.errmsg)
this.handleRemove(file)
})
},
getImg(){
let arr = JSON.parse(JSON.stringify(this.fileList))
arr.map((item,i)=>{
if(item.response){
item.uid = item.response.annex_id
}
})
this.$nextTick(()=>{
this.fileWrap=arr;
})
this.$emit('fileChange',arr);
}
}
}
</script>
<style scoped lang='scss'>
/deep/ .el-upload-dragger{
border: 2px dashed #d9d9d9;
position: relative;
.my_temp{
position: absolute;
width: 100%;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
.el-icon-upload{
margin-top: 0px;
}
}
}
.file_wrap{
.file_item{
display: flex;
align-items: center;
background: #F4F6FB;
padding:0 5px;
margin: 5px 0;
>span{
flex: 1;
color: #636B78;
margin: 0 10px;
}
i{
color: #C4C4C4;
font-size: 20px;
&:nth-of-type(2){
cursor: pointer;
}
}
}
}
.hide_add{
/deep/ .el-upload--picture-card {
display: none;
}
}
/deep/ .el-upload-list{
display: none;
}
</style>
vue上传文件封装
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
禁止转载,如需转载请通过简信或评论联系作者。
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 查看minio官网,看到minio可以应用在不同的环境下,这里着重讲一下minio的js版,并在vue中运行,并且...
- antd-vue上传文件upload组件使用自定义上传方法customRequest无法显示文件上传进度条,如下图...
- 最近项目中涉及很多文件上传的地方,然后文件上传又有很多限制。比如文件大小限制,文件个数限制,文件类型限制,文件上传...