vue+js+element组件上传图片（el-upload）与图片展示

一、首先搭建vue，和配置element-UI组件

这个我就不多说了，前面的文章里面都有讲到

二、编写布局

安装你的需要来写布局，我这里是点击上传按钮，就会弹出新的一个弹出层页面，是运用element里面的

el-dialog 来达到效果的

效果图：

主要代码：

上传按钮：

<el-table-column label="操作" width="100" >
          <el-button size="medium" @click="dialogFormVisible = true">上传</el-button>
</el-table-column>


弹出框：
  <!--弹出框开始-->
  <el-dialog width="50%" :visible.sync="dialogFormVisible" @close ="closePictureWindow($event)">
      <div class="fooOne-con">
        <span style="margin: 10px 10px">上传图片：</span>
        <el-upload
          style="margin: 10px 10px"
          v-loading="pictureLoading"
          :action="baseApi+ '/album/uploadPhoto?albumid=43545345345323'"   //你上传图片的后端接口
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handleAvatarSuccess"
          :file-list="fileList3"
          :on-change="onGoingPicture"
          ref="handle"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-button style="margin: 10px 10px"  type="primary" @click="submitPhotographs">提交</el-button>
      </div>
  </el-dialog>

                    定义变量

三、编写js代码

   //关闭弹出框后清除数据
        closePictureWindow(callback){
          if(!callback){
            this.$refs.handle.clearFiles();
            this.fileList3 = [];
          }
        },
        //图片放大
        handlePictureCardPreview(file) {
          console.log(file);
        },
        //图片移除
        handleRemove(file, fileList){
          this.imgList=fileList
        },
        //图片上传成功时
        handleAvatarSuccess(response, file, fileList){
          this.imgList=fileList;
        },
        //图片上传loading
        onGoingPicture(file){
          if(file.status ==='ready'){
            this.pictureLoading = true
          }else if(file.status ==='success'){
            this.pictureLoading = false
          }
        },
        submitPhotographs() {
          this.dialogFormVisible = false
        },