<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程序设计有所帮助。