vue 上传组件,vue文件上传组件
本文主要详细介绍vue包组件的上传图片组件。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享了vue上传图片组件的包的具体代码，供大家参考，具体内容如下
未上传状态
上传状态
其他状态(查看/删除)
用户定义的组件文件名——这里称为UploadImg.vue
模板
差异
el格式
！- :on-change=uploadFile -
El-上传
:limit=limit //允许的最大上载次数
行为
Accept=image/* //接受上传的
:当文件状态更改时，on-change=uploadFile //函数
List-type=picture-card /文件列表的类型
:auto-upload=false //是否要在选择文件后立即上传？
:file-list=fileList //虚拟文件数组
:当文件数量超过限制时，on-exceed=handleExceed //函数
:当单击文件列表中已上传的文件时，on-preview= HandlePictureCardpreview //Function
:移除文件时on-remove= handle remove //file list函数
ref=上传
class=头像上传者
:class={hide:showUpload} //用于隐藏达到最大限制后关闭上传的按钮。
:disabled=disabled //正在处理查看，无法上传
i class=el-icon-plus/i
/El-上传
//检查图片
El-dialog width= 30% :visible . sync= dialog visible
img width= 100% :src= imgurl . URL alt/
/el-dialog
//如果不需要直接上传，需要点击按钮上传图片，请打开此方法。
//上面el-upload标签中的on-change替换为http-request方法。
！-button text= upload type= add _ u style= margin-top:10px；@click.native=提交上传/Button -
/el格式
/div
/模板
脚本
//介绍上传图片的界面
从“@/api/public/api”导入{ upload img }；
导出默认值{
道具：{
限制：数量，
文件列表：数组，
禁用：布尔型，
},
data() {
返回{
ShowUpload: false，//控制最大限值后关闭上传按钮。
DialogVisible: false，//检查图片的弹出框
ImgUrl: []，//上传图片后的地址收集
};
},
//监控上传图片的数组(为了处理修改时自动渲染和上传按钮消失的问题)；
观察：{
文件列表(新名称，旧名称){
if(newname . length==this . limit)this . show upload=true；
else this.showUpload=false
},
},
方法：{
//删除文件时的文件列表函数
handleRemove(文件，文件列表){
const index=this . filelist . find index((item)=item===file . uid)；
this.imgUrl.splice(索引，1)；
这个。$emit(delUrl ，this . imgurl)；
if(file list . length this . limit)this . show upload=false；
},
//点击文件列表中上传文件时的功能
handlePictureCardPreview(文件){
this . imgurl . URL=file . URL；
this.dialogVisible=true
},
//下面是通过按钮上传而不是直接上传的方式。
submitUpload() {
这个。$ refs . upload . submit()；
},
//文件状态改变时的函数(主逻辑函数)
上传文件(e，文件列表){
//判断用户上传的最大次数，使上传按钮消失。
if(file list . length=this . limit)this . show upload=true；
//const file=e . file；-这里不需要直接上传，可以通过按钮上传。
const file=e.raw//-直接上传到这里
//大小
const size=file . size/1024/1024/2；
如果(
！（
file.type===image/png
file.type===image/gif
file.type===image/jpg
file.type===image/jpeg
)
) {
这个。$notify.warning({
标题：“警告”，
消息：
请上传格式为图像/png，图像/gif，图像/jpg，图像/jpeg的图片，
});
} else if (size 2) {
这个. notify.warning({
标题： 警告，
消息： 图片大小必须小于2M，
});
}否则{
如果(这个。limit==1)这个。imgurl=[]；//此处判断为一张的时候需要清空数组
const params=new FormData()；
params.append(source ，file)；
上传（参数)。然后((res)={
//这里返回的数据结构（根据自己返回结构进行修改)
if (res.data.status===1) {
这个message.success(上传成功);
这个。imgurl=RES . data
//调用父组件的方法来传递图片参数
这个. emit(getUrl ，这个。imgurl)；
}否则这个message.error(上传失败);
});
}
},
//文件超出个数限制时的函数
handleExceed(文件，文件列表){
这个$消息。信息(` m最多只允许上传${this.limit}张图片`);
},
},
};
/脚本
//这里修改上传前后的样式（我觉得埃尔-上传不好看也可以自行修改)
样式范围。藏起来100 . El-上传-图片-卡片{
显示：无！重要；
}。头像上传者100 . El-上传{
宽度：200像素
高度：200像素
行高：200像素；
边框-半径：0px
背景：# fff
边框：1px虚线# ccc
}。头像上传者100 . El-上传我{
字体大小：28px
颜色：# ccc
}。头像上传者100 . El-上传-列表{
显示：块；
}。头像上传者。上传列表100 . El-上传-列表_ _项{
宽度：200像素
高度：200像素
显示：块；
}。头像上传者。上传列表el-upload-list__item img {
宽度：200像素
高度：200像素
边框-半径：0px
}
/风格
在页面中使用- (因为我这边用的地方比较多，我就写全局了，你们可以根据自身项目来决定)
主页。射流研究…
//图片上传组件
从" @/views/common/UploadImg.vue "导入上传
Vue.component(上传，上传)
演示。某视频剪辑软件
El-表单-项目标签=上传图片
//限制最大上传几张图片//文件列表图片数组//getUrl获取上传后地址//delUrl删除上传后地址//禁用禁用处理
upload img:limit= 1 :file-list= file list @ getUrl= getUrl($ event，自己需要携带的参数) @delUrl=delUrl($event，自己需要携带的参数):disabled=true /
/El-表单-项目
//变量声明
数据：{
文件列表：[]
}
//函数
getUrl(getUrl){
console.log(getUrl)
};
delUrl(getUrl){
console.log(getUrl)
};
希望此文章能帮助到你！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。