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>

   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>