vue使用upload上传附件

vue使用upload上传附件

这里的上传附件包括视频，图片，等各种格式
效果图

---

使用步骤

1.引入upload

代码如下（示例）：

  <el-upload
                  ref="upload"
                  :file-list="fileList"
                  :http-request="uploadFile"
                  :show-file-list="false"
                  action="#"
                  class="upload-demo"
                  :disabled="isSubmitFile"
                >
                  <el-button
                    slot="trigger"
                    size="small"
                    type="primary"
                    :disabled="isSubmitFile"
                    :loading="loading"
                    style="width: 122px"
                  >
                    <span v-if="!this.loading"
                      ><i class="el-icon-paperclip" style="font-size: 16px"></i
                      ><span style="margin-left: 10px; font-size: 16px"
                        >添加附件</span
                      ></span
                    >
                    <span v-else style="margin-left: 5px; font-size: 16px"
                      >上传中</span
                    >
                  </el-button>
                  <div class="fj_box">
                    <div
                      v-for="(item, index) in subArry"
                      :key="index"
                      style="margin: 5px 0"
                    >
                      <i class="el-icon-paperclip"></i>
                      <span>{{ item.fileName }}</span>
                      <span style="color: #999"> ({{ item.fileSize }}) </span>
                      <span
                        v-show="
                          item.fileExtension == 'pdf' ||
                          item.fileExtension == 'jpg' ||
                          item.fileExtension == 'png' ||
                          item.fileExtension == 'jpeg' ||
                          item.fileExtension == 'mp4'
                        "
                        class="fotnClass"
                        @click="
                          previewFjBtn(
                            item.therapyRecordExpandId,
                            item.fileExtension
                          )
                        "
                        >预览</span
                      ><span
                        class="fotnClass"
                        @click="downLoadFjBtn(item.therapyRecordExpandId)"
                        >下载</span
                      ><span
                        class="fotnClass"
                        @click="
                          resetNameFjBtn(
                            item.fileName,
                            item.fileExtension,
                            item.therapyRecordExpandId
                          )
                        "
                        >重命名</span
                      ><span
                        class="fotnClass"
                        @click="deleteFjBtn(item.therapyRecordExpandId)"
                        >删除</span
                      >
                    </div>
                  </div>
                </el-upload>

2.编写js

代码如下（示例）：

      this.formData1 = new FormData();
      this.formData1.append("file", param.file);
    发送请求即可--this.formData1--就是上传的附件参数，注意：直接 console.log( this.formData1）是看不出任何东西的，需要调get方法，this.formData1.get("file")

---

3.预览

 previewFjBtn(therapyRecordExpandId, fileExtension) {
      let url = ''
      url = window.SITE_CONFIG['baseUrl'] + "/expand/rhTherapyRecordExpand/getShowFile?therapyRecordExpandId=" + therapyRecordExpandId
      if (fileExtension == 'jpg' || fileExtension == 'png' || fileExtension == 'jpeg') {
        this.imageUrl = url
        this.isImgpreVisible = true
        this.$nextTick(() => {
          this.$refs.imgpreRef.init(this.imageUrl)
        })
      } else if (fileExtension == 'mp4') {
        this.fileMp4 = therapyRecordExpandId.split(',')
        this.dealVideoUrlFun()
        // this.videoUrl = url
        // this.isVideoVisible = true
        // this.$nextTick(() => {
        //   this.$refs.videopReRef.init(this.videoUrl)
        // })
      } else if (fileExtension == 'pdf') {
        this.isPdfVisible = true
        this.pdfsrc = url
        this.$nextTick(() => {
          this.$refs.pdfpreRef.init(this.pdfsrc)
        })
      }
    },

4.使用vue-pdf预览pdf

（***注意***本地预览没问题，打包后可能存在pdf预览不出来，解决方法参考我的另一篇文章 https://editor.csdn.net/md/?articleId=121690934）

<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      class="pdfDiaCLsss"
      title="预览"
      @close="pdfDiaClose"
    >
      <div class="pdf">
        <div class="pageButton">
          <el-button size="mini" @click="changePdf(0)" round>上一页</el-button>
          <span> {{ currentPage }} / {{ pageCount }} </span>
          <el-button size="mini" @click="changePdf(1)" round>下一页</el-button>
        </div>
        <pdf
          :src="this.pdfsrc"
          :page="currentPage"
          @num-pages="pageCount = $event"
          @page-loaded="currentPage = $event"
          @loaded="loadPdf"
          ref="pdfBody"
        >
        </pdf>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  components: { pdf },
  data() {
    return {
      dialogVisible: false,
      currentPage: 0, // 页码
      pageCount: 0, // 总页数
      pdfsrc: '',
    }
  },
  methods: {
    init(pdfsrc) {
      this.pdfsrc = pdfsrc
      this.dialogVisible = true
    },
    pdfDiaClose() {
      this.dialogVisible = false
      this.pdfsrc = ''
    },
    changePdf(num) {
      if (num == 0) {
        this.currentPage--
      } else {
        this.currentPage++
      }
      this.changePage(this.currentPage)
    },
    // 翻页
    changePage(val) {
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--;
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++;
      }
    },
    // pdf加载时
    loadPdf() {
      this.currentPage = 1 // 加载的时候先加载第一页
    },
  },
}
</script>
<style lang="scss" scoped>
  .pdfDiaCLsss {
    /deep/ .el-dialog {
      height: 85%;
    }
    /deep/ .el-dialog__body {
      height: calc(100% - 70px);
      .pdf {
        height: 100%;
        overflow-y: auto;
      }
    }
  }
</style>

5.使用video.js预览MP4

（注意***video.js本身存在动态修改src路径可能视频不刷新还是上一次播放的视频问题，有人说可以利用dispose销毁dom重新生成，这样确实可以，但是不满足我的需求，所以此处我将路径放在了数组里，利用数组循环出来，这样的好处是可以***同时播放多个视频）

<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisiblePicVideo"
      class="videoClssDia"
      @close="videoDiaCloseBth"
      title="预览"
    >
      <div v-for="(item, index) in videoUrl" :key="index" class="outbox">
        <video
          ref="videoPlayer"
          :id="'playVideos' + index"
          class="video-js"
          poster=""
          controls="controls"
          style="width: 100%; height: 100%; object-fit: fill"
        >
          <source :src="item.url" type="video/mp4" />
        </video>
      </div>
      <!-- <video
        ref="videoPlayer"
        id="playVideos"
        class="video-js"
        poster=""
        controls="controls"
        style="width: 100%; height: 100%"
      >
        <source :src="videoUrl" type="video/mp4" />
      </video> -->
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisiblePicVideo: false,
      videoUrl: '',
      // 播放参数
      options: {
        controls: true, // 是否显示底部控制栏
        preload: "auto", // 加载<video>标签后是否加载视频
        autoplay: "muted", // 静音播放
        // playbackRates: [0.5, 1, 1.5, 2],// 倍速播放
        width: "640",
        height: "247",
        controlBar: {
          // 自定义按钮的位置
          children: [
            {
              name: "playToggle"
            },
            {
              name: "progressControl"
            },
            {
              name: "currentTimeDisplay"
            },
            {
              name: "timeDivider"
            },
            {
              name: "durationDisplay"
            },

            {
              name: "volumePanel", // 音量调整方式横线条变为竖线条
              inline: false
            },
            {
              name: "pictureInPictureToggle" //画中画播放模式
            },
            {
              name: "fullscreenToggle"
            }
          ]
        }
      }
    }
  },
  methods: {
    init(videoUrl) {
      this.videoUrl = videoUrl
      this.dialogVisiblePicVideo = true
      // this.$nextTick(() => {
      //   // this.player = this.$video(this.$refs.videoPlayer, this.options);
      //   let videos = document.getElementById('playVideos');
      //   videos.src = this.videoUrl;
      // })
    },
    videoDiaCloseBth() {
      this.videoUrl = ''
      this.dialogVisiblePicVideo = false
    },
  },
}
</script>
<style lang="scss" scoped>
.videoClssDia {
  .el-dialog {
    width: 60%;
  }
   /deep/ .el-dialog__body {
      display: flex;
      justify-content: space-between;
      height: 400px;
      .outbox {
        width: 100%;
        height: 100%;
      }
    }
    /deep/ .vjs-big-play-button {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
}
</style>