本文实例讲述了某视频剪辑软件开发之封装上传文件组件与用法。分享给大家供大家参考，具体如下：

使用elementui的埃尔-上传插件实现图片上传组件

每个项目存在一定的特殊性，所以数据的处理会不同

pictureupload.vue:

模板div class=' pictureupload ' El-upload : action=' base URL '/API/public/image ' ' list-type=' picture-card ' : on-preview=' handlepicturecard preview ' : on-remove=' handleRemove ' : file-list=' fileList ' : on-over=' handleover ' : before-remove=' before ' name=' img ' 33: on-success='上传成功'从" @/store "导入存储；导出默认值{ prop : { imglist : { type : Array，default: [] }，//父组件传递的图片列表limit: '' //图片数量限制}，data() { return { fileList: []，upLoadData: { img: '' }，baseurl : process。环境。base _ API，dialogVisible: false，dialogImageUrl: ' '，标头RS : {授权：存储。geters。token _ type“”存储。geters。令牌}//接口调用令牌};}，watch: { //监听图片列表的变化：文件列表要求的格式为[{url: img}]，所以监听图片列表变化后将其进行处理，赋值给文件列表imglist : {处理程序(新值，旧值){ if(新值。length===0){ this。文件列表=[]；返回；}对于(让I=0；I new VaLue . lengthi){ if(old VaLue[I]！=NewValue[I]){这个。file list=[]；新价值。foreach(El={ this。文件列表。推送({ URL : El })})返回；} } }，deep: true } }，methods: { //图片移除时处理数据手柄拆卸(文件，文件列表){ let item=[]；文件列表。foreach(El={ item。推(El。网址)；});这个$emit('removeimg '，item)；}，handlePictureCardPreview(文件){这个。dialogimageURl=文件。网址；this.dialogVisible=true}，//判断图片数量handleExceed(文件，文件列表){这个.$消息。警告(` 0当前限制选择${this.limit}个文件，本次选择了${files.length}个文件，共选择了${files.length fileList.length}个文件`);}，beforeRemove(文件，文件列表){},//上传图片成功事件上传成功（回应){这$emit('uploadimg '，响应。消息)；这个$message('上传成功',);} }，挂载(){ if(this。imglist。长度！=0){ this。imglist。foreach(El={ this。文件列表。推送({ URL : El })；});} }};/script使用上传图片组件：

pictureupload @ uploadimg=' uploadimg ' : im glist=' Ruleform。img ' : limit=' 3 ' @ remove img=' remove img '/pictureuploadremoveimg(item){ this。规则形式。img=item}，uploadimg(项){ this.ruleForm.img.push(项);},希望本文所述对大家vue.js程序设计有所帮助。