| 提交 | 用户 | age | ||
| 92f93f | 1 | <template> |
| 347623 | 2 | <div class="upload_single_file_auto"> |
| 92f93f | 3 | <!-- accept="video/mp4" --> |
| L | 4 | <el-upload |
| 5 | ref="refUploadFile" | |
| 6 | action="#" | |
| 7 | :before-upload="beforeUploadFile" | |
| 8 | :limit="1" | |
| 9 | :accept="accept" | |
| 10 | :file-list="uploadFiles" | |
| 11 | :on-change="addUploadImg" | |
| 12 | :on-remove="delUploadImg" | |
| 13 | :http-request="reqUploadFile" | |
| 14 | style="width: 200px" | |
| 15 | > | |
| 16 | <el-button style="display: block" :disabled="uploadFiles&&uploadFiles.length>0" class="mb8" type="primary" size="small" icon="el-icon-plus">上传文件</el-button> | |
| 17 | <div @click.stop> | |
| 18 | <!-- 视频 --> | |
| 19 | <video | |
| 20 | v-if="type===0&&uploadFiles.length" | |
| 21 | class="com-up-video" | |
| 22 | :src="uploadFiles[0].url" | |
| 23 | controls="controls" | |
| 24 | >您的浏览器不支持视频播放</video> | |
| 25 | <!-- 音频 --> | |
| 26 | <audio | |
| 27 | v-if="type===1&&uploadFiles.length" | |
| 28 | :src="uploadFiles[0].url" | |
| 29 | style="width: 230px;height: 40px;" | |
| 30 | controls="controls" | |
| 31 | /> | |
| 32 | <!-- 图片 --> | |
| 33 | <el-image | |
| 34 | v-if="type===2&&uploadFiles.length" | |
| 35 | class="com-up-video" | |
| 36 | :src="uploadFiles[0].url" | |
| 37 | fit="contain" | |
| 38 | :preview-src-list="[uploadFiles[0].url]" | |
| 39 | /> | |
| 40 | </div> | |
| 41 | </el-upload> | |
| 42 | ||
| 43 | <!-- upload放大图片 --> | |
| 44 | <el-dialog :visible.sync="uploadPreviewVisible" append-to-body style="text-align:center"> | |
| 45 | <img style="max-width:100%" :src="uploadPreviewUrl" alt=""> | |
| 46 | </el-dialog> | |
| 47 | </div> | |
| 48 | </template> | |
| 49 | ||
| 50 | <script> | |
| 51 | import mixin_upload from '@/mixins/upload.js' // 通用上传文件预览 | |
| 52 | export default { | |
| 53 | mixins: [mixin_upload], | |
| 54 | model: { | |
| 55 | prop: 'uploadFiles', | |
| 56 | event: 'change' | |
| 57 | }, | |
| 58 | props: { | |
| 59 | uploadFiles: { | |
| 60 | type: Array, | |
| 61 | default: () => { | |
| 62 | return [] | |
| 63 | } | |
| 64 | }, | |
| 65 | // 0视频1音频2图片 | |
| 66 | type: { | |
| 67 | type: Number, | |
| 68 | default: 0 | |
| 69 | } | |
| 70 | ||
| 71 | }, | |
| 72 | ||
| 73 | data() { | |
| 74 | return { | |
| 75 | callback: null, | |
| 76 | isCanAdd: true, | |
| 77 | accept: 'video/mp4' | |
| 78 | } | |
| 79 | }, | |
| 80 | watch: { | |
| 81 | type(type) { | |
| 82 | if (this.type === 0) this.accept = 'video/mp4' | |
| 83 | if (this.type === 1) this.accept = 'audio/mp3,audio/mpeg' | |
| 84 | if (this.type === 2) this.accept = 'image/jpeg,image/jpg,image/gif,image/png' | |
| 85 | } | |
| 86 | }, | |
| 87 | methods: { | |
| 88 | // 上传文件 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ | |
| 89 | // 上传前回调 | |
| 90 | beforeUploadFile(file) { | |
| 91 | if (this.type === 0) this.beforeUploadVideo(file) | |
| 92 | if (this.type === 1) this.beforeUploadAudio(file) | |
| 93 | if (this.type === 2) this.beforeUploadImg(file) | |
| 94 | }, | |
| 95 | beforeUploadVideo(file) { | |
| 96 | var fileSize = file.size / 1024 / 1024 < 50 | |
| 97 | if (['video/mp4'].indexOf(file.type) === -1) { | |
| 98 | this.$message.error('必须是mp4文件') | |
| 99 | return false | |
| 100 | } | |
| 101 | if (!fileSize) { | |
| 102 | this.$message.error('视频大小不能超过50MB') | |
| 103 | return false | |
| 104 | } | |
| 105 | }, | |
| 106 | beforeUploadAudio(file) { | |
| 107 | console.log('file.type', file.type) | |
| 108 | var fileSize = file.size / 1024 / 1024 < 50 | |
| 109 | if (['audio/mp3'].indexOf(file.type) === -1 && ['audio/mpeg'].indexOf(file.type) === -1) { | |
| 110 | this.$message.error('必须是mp3文件') | |
| 111 | return false | |
| 112 | } | |
| 113 | if (!fileSize) { | |
| 114 | this.$message.error('音频大小不能超过50MB') | |
| 115 | return false | |
| 116 | } | |
| 117 | }, | |
| 118 | beforeUploadImg(file) { | |
| 119 | const isImg = file.type.indexOf('image/') > -1 | |
| 120 | const isTooLarge = file.size / 1024 / 1024 > 4 | |
| 121 | if (!isImg) { | |
| 122 | this.$message.error('必须是选择图片文件') | |
| 123 | return false | |
| 124 | } else if (isTooLarge) { | |
| 125 | this.$message.error('请勿上传大于4MB的图片') | |
| 126 | return false | |
| 127 | } | |
| 128 | }, | |
| 129 | // 增加文件 | |
| 130 | addUploadImg(file, fileList) { | |
| 131 | this.$emit('change', fileList) | |
| 132 | console.log(fileList) | |
| 133 | }, | |
| 134 | // 删除文件 | |
| 135 | delUploadImg(file, fileList) { | |
| 136 | this.$emit('change', fileList) | |
| 137 | }, | |
| 138 | ||
| 139 | // 上传文件 uploadType 0图片1视频2音频 | |
| 140 | reqUploadFile(res) { | |
| 141 | var uploadType = 0 | |
| 841a51 | 142 | if (this.type === 0) uploadType = 'IMG' |
| L | 143 | if (this.type === 1) uploadType = 'Video' |
| 144 | if (this.type === 2) uploadType = 'FILE' | |
| 92f93f | 145 | const file = res.file |
| L | 146 | const formData = new FormData() |
| 147 | formData.append('file', file) | |
| 148 | this.postFN({ | |
| 149 | url: 'admin/image/upload?type=' + uploadType, | |
| 150 | header: { 'Content-Type': 'multipart/form-data' }, | |
| 151 | params: formData, | |
| 152 | mockData: { | |
| 153 | code: 100, | |
| 154 | msg: '', | |
| 155 | data: { | |
| 2d9354 | 156 | // imgUrl: 'https://music.163.com/song/media/outer/url?id=1805088448.mp3' |
| L | 157 | imgUrl: 'https://www.w3school.com.cn/i/movie.mp4' |
| 92f93f | 158 | } |
| L | 159 | } |
| 160 | }, (inf) => { | |
| 161 | // 替换掉未上传的图片 | |
| 2d9354 | 162 | this.$emit('change', [{ name: '素材', url: inf.imgUrl, status: 'success' }]) |
| 92f93f | 163 | |
| L | 164 | console.log('上传文件成功且结束') |
| 165 | ||
| 166 | // 提交 | |
| 167 | // this.$set(this.dialogData, 'imgUrl', inf.imgUrl) | |
| 2d9354 | 168 | this.callback && this.callback(inf.imgUrl) |
| 92f93f | 169 | }) |
| L | 170 | } |
| 171 | // 上传文件 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ | |
| 172 | } | |
| 173 | } | |
| 174 | </script> | |
| 175 | ||
| 176 | <style> | |
| 177 | .el-upload-list__item{ | |
| 178 | transition: none; | |
| 179 | } | |
| 347623 | 180 | |
| L | 181 | .upload_single_file_auto .el-upload-list__item-name{ |
| 182 | padding: 5px!important; | |
| 183 | } | |
| 184 | ||
| 92f93f | 185 | </style> |
