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