|
@@ -0,0 +1,342 @@
|
|
|
+<style></style>
|
|
|
+<style lang="scss" scoped></style>
|
|
|
+<template>
|
|
|
+ <div class="upload-file">
|
|
|
+ <a-upload
|
|
|
+ name="file"
|
|
|
+ :multiple="multiple"
|
|
|
+ list-type="picture-card"
|
|
|
+ class="avatar-uploader"
|
|
|
+ action="https://media-1301855440.cos.ap-chongqing.myqcloud.com/"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ @change="handleChange"
|
|
|
+ :accept="uploadType + '/' + (uploadType == 'image' ? 'jpeg,image/jpg' : 'mp4')"
|
|
|
+ :file-list="fileList"
|
|
|
+ :remove="removeFile"
|
|
|
+ @preview="handlePreview"
|
|
|
+ :disabled="loadingElse || disabled"
|
|
|
+ >
|
|
|
+ <div v-if="fileList.length < fileCount || fileList.length < 1">
|
|
|
+ <a-progress v-if="loadingElse" :percent="percent" :show-info="false" />
|
|
|
+ <div class="ant-upload-text">点击上传</div>
|
|
|
+ </div>
|
|
|
+ </a-upload>
|
|
|
+ <div style="color: red" v-if="sizeCheck">
|
|
|
+ {{ uploadType == 'image' ? '请上传jpg格式的图片,并且大小在2m之内' : '请上传mp4格式,大小在100m之内' }}
|
|
|
+ </div>
|
|
|
+ <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
|
|
|
+ <img alt="example" style="width: 100%" :src="previewImage" v-if="uploadType == 'image'" />
|
|
|
+ <video :src="previewImage" v-else style="width: 100%" controls="controls">
|
|
|
+ 您的浏览器不支持 video 标签。
|
|
|
+ </video>
|
|
|
+ </a-modal>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+import moment from 'moment'
|
|
|
+
|
|
|
+import BMF from 'browser-md5-file'
|
|
|
+
|
|
|
+import qs from 'qs'
|
|
|
+var COS = require('cos-js-sdk-v5')
|
|
|
+var cos = new COS({
|
|
|
+ SecretId: 'AKIDE6IpMi8fJQRCg1iuWzFajjRs43kbbets',
|
|
|
+ SecretKey: 'tXzuwMfplTTK3c9GFUyETilasvQfePu9',
|
|
|
+})
|
|
|
+var i = 0
|
|
|
+const oneKB = 1024
|
|
|
+
|
|
|
+function getBase64(file) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ const reader = new FileReader()
|
|
|
+ reader.readAsDataURL(file)
|
|
|
+ reader.onload = () => resolve(reader.result)
|
|
|
+ reader.onerror = (error) => reject(error)
|
|
|
+ })
|
|
|
+}
|
|
|
+export default {
|
|
|
+ name: 'upload-file',
|
|
|
+ components: {},
|
|
|
+ props: {
|
|
|
+ uploadType: {
|
|
|
+ //上传类型 值为 image/video,同时目录名称也是这样
|
|
|
+ type: String,
|
|
|
+ default() {
|
|
|
+ return 'image'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ multiple: {
|
|
|
+ // true 可以批量上传 false 不可以
|
|
|
+ type: Boolean,
|
|
|
+ default() {
|
|
|
+ return true
|
|
|
+ },
|
|
|
+ },
|
|
|
+ fileCount: {
|
|
|
+ //最大上传数量
|
|
|
+ type: Number,
|
|
|
+ default() {
|
|
|
+ return 10
|
|
|
+ },
|
|
|
+ },
|
|
|
+ checkFile: {
|
|
|
+ //返回promise方法,判读文件是否上传过,进行上传拦截
|
|
|
+ type: Function,
|
|
|
+ default() {
|
|
|
+ return Promise.resolve()
|
|
|
+ },
|
|
|
+ },
|
|
|
+ disabled: {
|
|
|
+ type: Boolean,
|
|
|
+ default() {
|
|
|
+ return false
|
|
|
+ },
|
|
|
+ },
|
|
|
+ value: {
|
|
|
+ required: true,
|
|
|
+ default() {
|
|
|
+ return ''
|
|
|
+ },
|
|
|
+ },
|
|
|
+ size: {
|
|
|
+ type: Number,
|
|
|
+ default() {
|
|
|
+ if (this.sizeCheck) {
|
|
|
+ if (this.uploadType == 'image') {
|
|
|
+ return 2048
|
|
|
+ } else {
|
|
|
+ return 102400
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ sizeCheck: {
|
|
|
+ type: Boolean,
|
|
|
+ default() {
|
|
|
+ return true
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onOversize: {
|
|
|
+ type: Function,
|
|
|
+ default() {
|
|
|
+ alert(`请选择${this.size}KB内的文件!`)
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ fileList: [],
|
|
|
+ loadingElse: false,
|
|
|
+ imageUrl: '',
|
|
|
+ percent: 0,
|
|
|
+ previewVisible: false,
|
|
|
+ previewImage: '',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filters: {},
|
|
|
+ computed: {},
|
|
|
+ mounted() {},
|
|
|
+ watch: {
|
|
|
+ // fileListAll
|
|
|
+ value: {
|
|
|
+ immediate: true,
|
|
|
+ handler(n, o) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (this.fileList && this.fileList.length == 0) {
|
|
|
+ if (typeof n == 'object') {
|
|
|
+ this.fileList = n.map((item, index) => {
|
|
|
+ return {
|
|
|
+ uid: index + 1,
|
|
|
+ name: index + 1,
|
|
|
+ status: 'done',
|
|
|
+ url: item,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ if (n === '') {
|
|
|
+ this.fileList = []
|
|
|
+ } else {
|
|
|
+ this.fileList = []
|
|
|
+ var data = {
|
|
|
+ uid: 1,
|
|
|
+ name: '回显',
|
|
|
+ status: 'done',
|
|
|
+ url: n,
|
|
|
+ }
|
|
|
+ this.fileList.push(data)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (n.length == 0 || n == '') {
|
|
|
+ this.clearAll()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleCancel() {
|
|
|
+ closeAllVideoFun()
|
|
|
+ this.previewVisible = false
|
|
|
+ },
|
|
|
+ handleChange(info) {
|
|
|
+ if (info.file.status === 'uploading') {
|
|
|
+ this.loading = true
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (info.file.status === 'done') {
|
|
|
+ // Get this url from response in real world.
|
|
|
+ getBase64(info.file.originFileObj, (imageUrl) => {
|
|
|
+ this.imageUrl = imageUrl
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ removeFile(file) {
|
|
|
+ // console.log(file)
|
|
|
+ var index = this.fileList.findIndex((v) => v.uid === file.uid)
|
|
|
+ this.fileList.splice(index, 1)
|
|
|
+ this.$emit('removeUpload', file)
|
|
|
+ },
|
|
|
+ async handlePreview(file) {
|
|
|
+ if (!file.url && !file.preview) {
|
|
|
+ file.preview = await getBase64(file.originFileObj)
|
|
|
+ }
|
|
|
+ this.previewImage = file.url || file.preview
|
|
|
+ this.previewVisible = true
|
|
|
+ },
|
|
|
+ beforeUpload(file) {
|
|
|
+ this.percent = 0
|
|
|
+ this.loadingElse = true
|
|
|
+ const fileOvesize = file.size > this.size * oneKB
|
|
|
+ // console.log(fileOvesize)
|
|
|
+ if (fileOvesize && this.sizeCheck) {
|
|
|
+ this.onOversize()
|
|
|
+ this.loadingElse = false
|
|
|
+ return
|
|
|
+ } else {
|
|
|
+ this.checkFile(file)
|
|
|
+ .then((res) => {
|
|
|
+ this.cosUpload(file)
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.loadingElse = false
|
|
|
+ })
|
|
|
+ return new Promise(function (resolve, reject) {
|
|
|
+ reject()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ clearAll() {
|
|
|
+ this.fileList = []
|
|
|
+ },
|
|
|
+ cosUpload(file) {
|
|
|
+ var that = this
|
|
|
+ let date = new Date()
|
|
|
+ let y = date.getFullYear()
|
|
|
+ let MM = date.getMonth() + 1
|
|
|
+ MM = MM < 10 ? '0' + MM : MM
|
|
|
+ let d = date.getDate()
|
|
|
+ d = d < 10 ? '0' + d : d
|
|
|
+ var timeElse = new Date().getTime()
|
|
|
+ var arr = file.name.split('.')
|
|
|
+
|
|
|
+ var str = ''
|
|
|
+ for (let i = 0; i < arr.length; i++) {
|
|
|
+ if (i == arr.length - 1) {
|
|
|
+ } else {
|
|
|
+ if (i == arr.length - 2) {
|
|
|
+ str += arr[i]
|
|
|
+ } else {
|
|
|
+ str += arr[i] + '.'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // console.log(str + '-' + timeElse + '.' + arr[arr.length - 1])
|
|
|
+ cos.putObject(
|
|
|
+ {
|
|
|
+ Bucket: 'media-1301855440',
|
|
|
+ /* 必须 */
|
|
|
+ Region: 'ap-chongqing',
|
|
|
+ /* 存储桶所在地域,必须字段 */
|
|
|
+ Key:
|
|
|
+ '/external-videos/' +
|
|
|
+ y +
|
|
|
+ '' +
|
|
|
+ MM +
|
|
|
+ '' +
|
|
|
+ d +
|
|
|
+ '/' +
|
|
|
+ str +
|
|
|
+ '-' +
|
|
|
+ timeElse +
|
|
|
+ '.' +
|
|
|
+ arr[arr.length - 1],
|
|
|
+ /* 必须 */
|
|
|
+ StorageClass: 'STANDARD',
|
|
|
+ Body: file, // 上传文件对象
|
|
|
+ onProgress: function (progressData) {
|
|
|
+ //进度条方法
|
|
|
+
|
|
|
+ that.percent = progressData.percent * 100
|
|
|
+ },
|
|
|
+ onTaskReady: function (tid) {
|
|
|
+ // console.log('onTaskReady', tid);
|
|
|
+ },
|
|
|
+ onTaskStart: function (info) {
|
|
|
+ //开始上传
|
|
|
+ // console.log('onTaskStart', info);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ function (err, data) {
|
|
|
+ if (err) {
|
|
|
+ that.loadingElse = false
|
|
|
+ that.$message.error('上传失败!!!' + err)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // alert('成功')
|
|
|
+ that.loadingElse = false
|
|
|
+ if (that.fileList.length < that.fileCount) {
|
|
|
+ that.fileList.push({
|
|
|
+ uid: file.name,
|
|
|
+ name: file.name,
|
|
|
+ status: 'done',
|
|
|
+ url: '//' + data.Location,
|
|
|
+ })
|
|
|
+
|
|
|
+ // that.$emit('overUpload', that.fileList.map(item => {
|
|
|
+ // return item.url
|
|
|
+ // }))
|
|
|
+ that.$emit('overUpload', that.fileList)
|
|
|
+
|
|
|
+ if (that.multiple) {
|
|
|
+ let urlList = that.fileList.map((item) => {
|
|
|
+ return item.url
|
|
|
+ })
|
|
|
+
|
|
|
+ that.$emit('update:value', urlList)
|
|
|
+ } else {
|
|
|
+ that.$emit(
|
|
|
+ 'update:value',
|
|
|
+ that.fileList.map((item) => {
|
|
|
+ return item.url
|
|
|
+ })[0]
|
|
|
+ )
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ that.$message.error('上传已达上限' + that.fileCount + '张')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+@import '~@assets/less/common.less';
|
|
|
+</style>
|