Vue开发之封装上传文件组件与用法示例
(编辑:jimmy 日期: 2024/11/3 浏览:3 次 )
本文实例讲述了Vue开发之封装上传文件组件与用法。分享给大家供大家参考,具体如下:
使用elementui的 el-upload插件实现图片上传组件
每个项目存在一定的特殊性,所以数据的处理会不同
pictureupload.vue:
<template> <div class="pictureupload"> <el-upload :action="baseUrl + '/api/public/image'" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :file-list="fileList" :on-exceed="handleExceed" :before-remove="beforeRemove" name="img" :on-success="upLoadSuccess" :data="upLoadData" :headers="headers" :limit="limit"> <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="/UploadFiles/2021-04-02/dialogImageUrl">使用上传图片组件:
<pictureupload @uploadimg="uploadimg" :imgList="ruleForm.img" :limit="3" @removeimg="removeimg"></pictureupload>removeimg(item) { this.ruleForm.img = item; }, uploadimg(item) { this.ruleForm.img.push(item); },希望本文所述对大家vue.js程序设计有所帮助。
下一篇:vue2.0自定义指令示例代码详解