vue中单个页面设置多个上传组件

本文主要是介绍vue中单个页面设置多个上传组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

简述：

        在最近的项目中，遇到单页面有多个上传图片的地方，如果每一个上传组件都写一个上传事件，在编码过程中又繁琐，后期维护也麻烦，最终在element-ui中找到了解决方法，在此记录一下。

html代码

<el-form-item label="背景图："><el-uploadclass="avatar-uploader"action="":show-file-list="false"list-type="picture":http-request="Upload":data="{name:'background_ImgUrl'}":on-error="handleFailure":before-upload="beforeAvatarUpload"><div class="imgorigin" v-if="!form.background_ImgUrl"><i class="el-icon-plus first"></i><span class="second"> 上传 </span></div><imgv-if="form.background_ImgUrl":src="form.background_ImgUrl"altclass="img avatar-uploader-icon"/></el-upload><span class="logo">建议尺寸：1920*400</span>
</el-form-item>
<el-form-item label="头像："><el-uploadclass="avatar-uploader"action="":show-file-list="false"list-type="picture":http-request="Upload":data="{name:'avator_ImgUrl'}":on-error="handleFailure":before-upload="beforeAvatarUpload"><div class="imgorigin" v-if="!form.background_ImgUrl"><i class="el-icon-plus first"></i><span class="second"> 上传 </span></div><imgv-if="form.background_ImgUrl":src="form.background_ImgUrl"altclass="img avatar-uploader-icon"/></el-upload><span class="logo">建议尺寸：1920*400</span>
</el-form-item>

图片上传，调用上传接口

注意：此处的file.data接收的参数，便是上面上传组件中定义的信息；通过拿到file.data中的数据，来判断是哪个上传弹框上传的数据，最后再根据业务需求，赋值给不同的变量

/**logo图片上传成功 */Upload(file) {console.log(file)var fileName = file.file.name;var formname = file.data.name;console.log('forname',formname)// 此处直接上传到阿里云上传接口.upload(file.file,fileName, (res) => {if (res.res.statusCode == "200") {switch(formname){case 'background_ImgUrl' :this.form.background_ImgUrl = 返回的图片路径breakcase 'avator_ImgUrl1':this.form.avatorValue_ImgUrl = 返回的图片路径break}this.$message({message: "上传成功！",type: "success",});} else {this.$message.warning("上传图片失败!");}});}

这篇关于vue中单个页面设置多个上传组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---