Vue实现自定义视频和图片上传的示例代码
作者:Ann_R 时间:2024-05-21 10:30:21
使用el-upload 上传视频总是报404错误,具体也不知道什么原因(如有知道的请评论告知,谢谢),去网上查了很多,代码写法确定是没有问题的,最后改为axios上传视频,就没出错了,顺便总结下图片上传
<template>
<div class="body">
<span>测试</span>
<span>视频上传</span>
<!-- style="display:none;" 隐藏input框 -->
<input style="display:none;" class="input-video" multiple type="file" accept="video/*"
@change="uploadVideo11($event)">
<div v-if="!videoUrl" class="no-bg wh">
<el-progress class="progress-video" v-if="progress" type="circle" :percentage="videoUploadPercent"></el-progress>
<div v-if="!progress" @click="uploadVideo">
<span>点击上传视频</span>
</div>
</div>
<video v-else="videoUrl" class="wh" v-bind:src="videoUrl" controls="controls">
您的浏览器不支持视频播放
</video>
<span>-------------------------------------------------------------------------</span>
<span>图片上传</span>
<!-- <el-upload
:disabled="disabled" 删除图片后禁止弹窗弹出
:action="this.$store.state.updataurl" 图片上传路径
:headers="headers" 请求头
:show-file-list="false" 文件列表
:on-success="handleAvatarSuccess" 上传成功回调
:before-upload="beforeAvatarUpload" 上传前回调
:on-remove="handleRemove" 移除回调
:on-progress="picUploadProcess" 上传进度条
class="wh" > -->
<el-upload :disabled="disabled" :action="this.$store.state.updataurl" :headers="headers" :show-file-list="false"
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-remove="handleRemove"
:on-progress="picUploadProcess" class="wh">
<div v-if="cover" class="change-img wh">
<!-- 地址拼接 -->
<img :src="picUrl + cover" class="wh" />
<div class="change">
<span class="arr">更换</span>
<span> | </span>
<span class="arr" @click="handleRemove">删除</span>
</div>
</div>
<div v-else class="no-bg wh">
<el-progress v-if="picFlag" type="circle" :percentage="picUploadPercent"></el-progress>
<div v-else @click="disabled = false">
<span class="note">点击上传封面图片</span>
</div>
</div>
</el-upload>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
// 视频
videoUrl: '', //视频播放地址
progress: false,
videoUploadPercent: 0,
// 图片
picUrl: this.$store.state.baseurl, //图片前缀
disabled: false, //删除图片后禁止文件选择弹窗弹出
picFlag: false, //进度条显示标识
picUploadPercent: 0,
cover: ''
}
},
computed: {
headers() {
return {
Authorization: this.$store.getters.token || localStorage.getItem("token"),
// soloFileName: 'video', //和后端协商的默认标识
};
},
},
methods: {
// 视频上传
uploadVideo() {
let ipFile = document.querySelector('.input-video')
ipFile.click();
this.videoUploadPercent = 0
},
async uploadVideo11(e) {
// console.log("uploadVideo11", e)
// console.log(e.target.files[0])
this.progress = true
let file = e.target.files[0]
console.log("file", file)
// multipart/form-data 格式
let formData = new FormData()
formData.append('file', file)
let config = {
//添加请求头
headers: {
Authorization: this.$store.getters.token || localStorage.getItem("token"),
"Content-Type": "multipart/form-data"
},
// 添加进度条
onUploadProgress: (progressEvent) => {
this.videoUploadPercent = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(0)) * 1
// console.log("this.videoUploadPercent", this.videoUploadPercent)
}
};
axios.post(this.$store.state.videoUploadUrl, formData, config, { timeout: 1000 * 60 * 2 }) //设置超时2分钟
.then(async (res) => {
console.log("视频上传", res);
this.videoUrl = res.data.data.playUrl //端传过来的视频播放地址
if (this.videoUrl) {
this.progress = false
this.$message({
message: '上传成功',
type: 'success'
});
}
}).catch(err => {
this.progress = false
console.log(err);
this.$message.error({
message: '上传失败'
});
})
},
// 图片上传
handleAvatarSuccess: function (response, file, fileList) {
if (file.response.code == 200) {
this.cover = file.response.data.src; //后端传过来的图片地址
this.picFlag = false
this.picUploadPercent = 0
}
},
handleRemove(file) {
this.cover = ''
this.disabled = true
// 1.获取将要删除图片的临时路径
// const filePath = file.response.data.tmp_path
// // 2.从pics数组中,找到图片对应的索引值
// const i = this.formData.pics.findIndex(x => x.pic === filePath)
// // 3.调用splice方法,移除图片信息
// this.formData.splice(i, 1)
},
beforeAvatarUpload(file) {
const isIMG = /^image\/(jpe?g|png|gif)$/.test(file.type);
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isIMG) {
this.$message.error("上传图片只能是 JPG/PNG/GIF 格式!");
}
if (!isLt2M) {
this.$message.error("上传图片大小不能超过 2MB!");
}
return isIMG && isLt2M;
},
picUploadProcess(event, file, fileList) {
this.picFlag = true;
this.picUploadPercent = file.percentage.toFixed(0) * 1;
},
}
}
</script>
<style lang="less" scoped>
// 进度条
/deep/ .el-progress-circle {
height: 100px !important;
width: 100px !important;
}
.body {
display: flex;
flex-direction: column;
}
.no-bg {
display: flex;
justify-content: center;
align-items: center;
border: 1px dashed #000000;
background-color: #FBFBFC;
border-radius: 5px;
cursor: pointer; //变小手
}
.wh {
width: 320px;
height: 180px;
border-radius: 5px;
}
.change-img {
position: relative;
.change {
opacity: 0;
position: absolute;
bottom: 8%;
left: 35%;
padding: 6px 11px;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 4px;
color: #FFFFFF;
}
}
.change-img:hover .change {
opacity: 1;
}
.arr {
cursor: default;
}
</style>
来源:https://blog.csdn.net/Ann_52547/article/details/130194007
标签:Vue,视频,图片,上传
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
记录一篇关于redux-saga的基本使用过程
2023-07-15 16:43:19
Pycharm使用Database Navigator连接mysql数据库全过程
2024-01-15 03:58:35
![](https://img.aspxhome.com/file/2023/9/134619_0s.jpg)
sql分类汇总及Select的自增长脚本
2024-01-22 20:43:34
![](https://img.aspxhome.com/file/2023/7/108517_0s.png)
python3 QT5 端口转发工具两种场景分析
2023-04-03 10:34:46
![](https://img.aspxhome.com/file/2023/3/133423_0s.png)
Python爬虫包 BeautifulSoup 递归抓取实例详解
2023-03-06 11:46:26
Python中如何将一个类方法变为多个方法
2022-10-10 02:01:47
![](https://img.aspxhome.com/file/2023/2/118762_0s.jpg)
Python实现提取音乐频谱的方法详解
2022-01-27 07:03:08
![](https://img.aspxhome.com/file/2023/2/72072_0s.jpg)
vuex实现数据状态持久化
2024-04-30 10:34:38
在Python的web框架中配置app的教程
2023-03-28 12:12:17
go语言 bool类型的使用操作
2024-04-26 17:35:03
如何利用SQL Server 2005中的模板参数
2009-01-23 15:02:00
深入了解Golang中的数据类型
2024-02-10 10:17:49
使用Python操作PDF文件
2022-01-01 06:15:12
![](https://img.aspxhome.com/file/2023/2/79552_0s.png)
wordpress网站转移到本地运行测试的方法
2024-05-11 09:53:39
![](https://img.aspxhome.com/file/2023/7/125827_0s.jpg)
简单上手Python中装饰器的使用
2023-06-20 19:20:06
vue.js使用v-if实现显示与隐藏功能示例
2024-05-02 16:59:50
![](https://img.aspxhome.com/file/2023/2/130082_0s.png)
js实现GIF动图分解成多帧图片上传
2023-08-15 00:06:38
Oracle9i取得建表和索引的DDL语句
2024-01-16 22:18:31
Python环境使用OpenCV检测人脸实现教程
2022-01-24 11:31:21
![](https://img.aspxhome.com/file/2023/4/68474_0s.jpg)
python二分法查找算法实现方法【递归与非递归】
2023-04-17 08:13:47