Vue开发之封装上传文件组件与用法示例

(编辑：jimmy 日期: 2025/10/26 浏览：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程序设计有所帮助。

上一篇：详解javascript中的Error对象
下一篇：vue2.0自定义指令示例代码详解