vue 自定义视频上传 el-upload图片上传

使用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>&nbsp;|&nbsp;</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 = truelet 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 = falsethis.$message({message: '上传成功',type: 'success'});}}).catch(err => {this.progress = falseconsole.log(err);this.$message.error({message: '上传失败'});})},// 图片上传handleAvatarSuccess: function (response, file, fileList) {if (file.response.code == 200) {this.cover = file.response.data.src;  //后端传过来的图片地址this.picFlag = falsethis.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>

vue 自定义视频上传 el-upload图片上传相关推荐

vue 富文本 quill 编辑器，实现图片上传到服务器，以及实时字数统计
vue 富文本 quill 编辑器,实现图片上传到服务器,以及实时字数统计写在前面 vue 富文本 quill / vue-quill-editor 如何使用图片上传到服务器实时字数统计图片编 ...
php上传图片限制类型,php,_使用php的图片上传类进行图片上传，总是提示：上传文件时出错 : 未允许类型。都是默认的配置，php - phpStudy...
使用php的图片上传类进行图片上传,总是提示:上传文件时出错 : 未允许类型 .都是默认的配置使用php的图片上传类进行图片上传,总是提示:上传文件时出错 : 未允许类型 .都是默认的配置 $upl ...
php 图片上传水印,PHP - 图片上传并添加水印
一个的面向过程的 PHP 图片上传并对其添加文字水印的功能. 还有很多待需完善的地方. index.php $conn=@mysql_connect("localhost",&qu ...
java 图片上传_java web图片上传和文件上传实例
本篇文章主要介绍了java web图片上传和文件上传实例,具有一定的参考价值,有需要的可以了解一下. 图片上传和文件上传本质上是一样的,图片本身也是文件.文件上传就是将图片上传到服务器,方式虽然有很多 ...
使用el upload标签上传文件的几种常见使用场景（前台+后台）
前言:本篇博客主要介绍ElementUI中el upload上传控件的使用,包含前后台代码. 文章目录一.总体代码二.使用场景 1.添加 2.修改 3.单独上传到服务器一.总体代码 1.前端控件 ...
vue用form上传图片_Vue formData实现图片上传
本文实例为大家分享了vue formdata实现图片上传的具体代码,供大家参考,具体内容如下 import vue from 'vue' /** * 图片上传 * 已注入所有vue实例, * temp ...
【vue.js】+云存储（实现图片上传功能）
利用vue.js+element-ui实现云存储上传图片功能文章目录前言一.对象存储二.配置腾讯云Cos 1.引入库第一步拥有腾讯云的开发者账号实名认证三.新建文件上传组件新建上传图片 ...
el-element照片墙，upload图片上传
效果: 官方文档示例注解: list-type:上传之后,图片的显示类型,有三种text.picture.picture-card. --text类型显示为文本类型,预览时不能看到上传的图片-- p ...
java图片预览上传_Java实现图片上传预览（使用ajax提交）
html: 图片上传: js: function changepic(){ var reads = new FileReader(); f = document.getElementById('fil ...

vue 自定义视频上传 el-upload图片上传

vue 自定义视频上传 el-upload图片上传相关推荐

最新文章

热门文章