123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306 |
- <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="uploadType=='image'?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">{{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 (file) {
- return Promise.resolve()
- }
- },
- disabled: {
- type: Boolean,
- default () {
- return false
- }
- },
- value: {
- type: [String, Array],
- required: true
- },
- size: {
- type: Number,
- default () {
- if (this.uploadType == 'image') {
- return 2048
- } else {
- return 102400
- }
- }
- },
- 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) {
- if (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 = [{
- uid: 1,
- name: 1,
- status: 'done',
- url: n,
- }]
- }
- }
- } 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.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: that.uploadType + '/' + 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) {
- that.$emit('update:value', that.fileList.map(item => {
- return item.url
- }))
- } 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>
|