vue使用upload上传附件

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

文章目录

vue使用upload上传附件
这里的上传附件包括视频，图片，等各种格式效果图 ![在这里插入图片描述](https://img-blog.csdnimg.cn/5d0bb432baf24c3cb8c277c384682e07.png#pic_center)
使用步骤
- 1.引入upload
- 2.编写js
3.预览
4.使用vue-pdf预览pdf
5.使用video.js预览MP4

使用步骤

1.引入upload

代码如下（示例）：

  <el-uploadref="upload":file-list="fileList":http-request="uploadFile":show-file-list="false"action="#"class="upload-demo":disabled="isSubmitFile"><el-buttonslot="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"><divv-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><spanv-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><spanclass="fotnClass"@click="downLoadFjBtn(item.therapyRecordExpandId)">下载</span><spanclass="fotnClass"@click="resetNameFjBtn(item.fileName,item.fileExtension,item.therapyRecordExpandId)">重命名</span><spanclass="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=" + therapyRecordExpandIdif (fileExtension == 'jpg' || fileExtension == 'png' || fileExtension == 'jpeg') {this.imageUrl = urlthis.isImgpreVisible = truethis.$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 = truethis.pdfsrc = urlthis.$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 = pdfsrcthis.dialogVisible = true},pdfDiaClose() {this.dialogVisible = falsethis.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"><videoref="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><!-- <videoref="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 = videoUrlthis.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>

vue使用upload上传附件相关推荐

antd vue form upload 上传
<template><div><a-form :form="form" :label-col="{ span: 5 }" :wra ...
ant react 上传_React实战之Ant Design—Upload上传_附件上传
React实战之Ant Design-Upload上传_附件上传 Upload组件大家都在官方文档中看过了,但写的时候还是会遇到许多问题,一些新手看了文档后感觉无从下手,本文过多的简绍就不说了,直接看 ...
el upload ajax,Upload 上传 el-upload 上传配置请求头为Content-Type: multipart/form-data
api接口处添加属性 (标红处) // 校验台账 export const checkEquiment = (data) => { return axios({ url: '/job/equip ...
上传附件----q-uploader
上传附件----q-uploader 一,用到的技术:Vue + Quasar 1,附件上传这种组件在很多UI框架里都有,今天写的是在Quasar框架下 : 属性说明 url 用来处理上传的服务器的 ...
SharePoint 2010 列表项代码绑定附件心得（FileUpload上传附件）
最近项目中用到在插入Item时绑定附件,可以上传多个附件,很快就写出来了,可是测试一侧老是有问题,经过多番折腾,终于算通过测试.SharePoint 2010上传附件需注意一下几点: 判断文件是否为空 ...
salesforce零基础学习（八十九）使用 input type=file 以及RemoteAction方式上传附件
在classic环境中,salesforce提供了<apex:inputFile>标签用来实现附件的上传以及内容获取.salesforce 零基础学习(二十四)解析csv格式内容中有类似的 ...
HALO博客配置华为云OSS上传附件
大家好,我是满心前言之前使用的服务器本地存储,用了半年左右发现,存储量较大,而且访问速度也很慢,就考虑使用OBS存储方式,由于我使用的是华为云服务器,所以这里也选用华为的OBS,其实和阿里云差不了 ...
像163邮箱一样的上传附件。。
前一久偶然发现163邮箱上传附件的方法很特别,模仿写了一个,呵呵.. <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
vant移动端上传附件
1.vant-ui默认上传附件为图片格式 <van-uploader :after-read='afterRead' :max-count="1"><!-- 可以 ...

vue使用upload上传附件

vue使用upload上传附件

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

文章目录

使用步骤

1.引入upload

2.编写js

3.预览

4.使用vue-pdf预览pdf

5.使用video.js预览MP4

vue使用upload上传附件相关推荐

最新文章

热门文章

vue使用upload上传附件

vue使用upload上传附件

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

文章目录

使用步骤

1.引入upload

2.编写js

3.预览

4.使用vue-pdf预览pdf

5.使用video.js预览MP4

vue使用upload上传附件相关推荐

最新文章

热门文章

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