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> | </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>
