vue 图片上传

一、页面

   <el-col :xs="66" :sm="66" :lg="22">
                  <el-form-item label="上传附件" prop="fileList">
                    <el-upload
                      class="upload-demo"
                      action="#"
                      :auto-upload="false"
                      :on-change="handleChange"
                      :on-remove="handleRemove"
                      multiple
                      :file-list="fileList"
                      list-type="picture"
                    >
                      <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="66" :sm="66" :lg="24">
                  <el-form-item>
                    <span style="color:red;">只能上传pdf,png、gif、jpg、jpeg格式的文件，文件大小不能超过100M。</span>
                  </el-form-item>
                </el-col>
              </el-row>

　　二、js相关方法

   handleChange(file, fileList) {
      if (file.size / 1024 / 1024 > 5) {
        this.$publicmethod.showMessage("单个文件大小不能超过5MB",this.$publicmethod.ErrorType);
      } else {
        this.fileList = fileList;
      }
    },
    // 删除
    handleRemove(file, fileList) {
      this.fileList = fileList;
      if (file.id) {
        this.$confirm("确定要删除此图片吗，删除后不可恢复。", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
            let ids = [];
            ids.push(file.id);
            deleteById(ids).then(res => {
              if (res.code == 200) {
                this.$publicmethod.showMessage(res.message, this.$publicmethod.SuccessType);
              } else {
                this.fileList.push(file);
                this.$publicmethod.showMessage(res.message, this.$publicmethod.ErrorType);
              }
            });
          })
          .catch(() => {
            this.fileList.push(file);
          });
      }
    },
// 获取图片方法

 // 显示图片信息

    getByRelationId(params,type){

       getByRelationId(params).then(res => {

          if (res.code == 200) {

            this.fileList=[]

            let result = res.data;

            this.fileList = res.data;

            // 新开一个页面

            if(type == "line"){

              this.src = res.data[0].filePath;

              if(this.src !=null){

                  let fileType= this.src.split(".")[1];

                  if(fileType == "pdf")

                  {

                    this.isShowPdf =true;

                  }else{

                     for (let i = 0; i < result.length; i++) {

                        this.fileList[i].url = result[i].filePath;

                        this.fileList[i].name = result[i].originalName;

                     }

                    this.isShowImage=true;

                  }

              }

            }else{

              for (let i = 0; i < result.length; i++) {

                  this.fileList[i].url = result[i].filePath;

                  this.fileList[i].name = result[i].originalName;

              }

            }

          } else {

            this.$publicmethod.showMessage(res.message, this.$publicmethod.ErrorType);

          }

        });

    },

　　三、后台接口，这就是批量删除了

// 删除图片
export function deleteById(ids) {
  return request({
    url: 'api/sys-attach-filepath-info',
    method: 'delete',
    data: ids
  })
}

　　四、文件显示框

      <!-- 图片显示列表-->
      <div class="dialog_diy">
        <el-dialog :visible.sync="isShowImage" :close-on-click-modal="false">
          <div slot="title" class="header-title">
            <div style="padding:15px 20px;">图片列表</div>
          </div>
          <div style=" 95%;">
            <!-- <el-image
              v-for="url in fileList"
              :key="url.id"
              :src="url.filePath"
              style=" 150px; height: 150px;margin:10px;margin-left:20px"
            /> -->
            <el-carousel type="card" height="540px">
              <el-carousel-item v-for="item in fileList" :key="item.id">
                <div class="divImgStyle">
                  <el-image class="imgStyle" :src="item.filePath" fit="contain" />
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-dialog>
      </div>
      <!-- 显示pdf-->
      <div class="dialog_diy">
        <el-dialog :visible.sync="isShowPdf" :close-on-click-modal="false" width="700px">
          <div slot="title" class="header-title">
            <div style="padding:15px 20px;">PDF内容</div>
          </div>
          <div class="pdf" style="670px;height:620px;overflow-x:auto;">
            <el-button-group>
              <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button>
              <el-button type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right" /></el-button>
            </el-button-group>
            <pdf
              ref="pdf"
              :src="src"
              :page="pageNum"
              @progress="loadedRatio = $event"
              @num-pages="pageTotalNum=$event"
            />
          </div>
        </el-dialog>
      </div>

　　五、效果图