6 changed files with 163 additions and 499 deletions
-
39src/views/components/upload.vue
-
133src/views/components/upload_cover.vue
-
105src/views/components/upload_img.vue
-
161src/views/components/upload_img2.vue
-
199src/views/components/upload_img3.vue
-
25src/views/materialContent/materialList/index.vue
@ -0,0 +1,133 @@ |
|||||
|
<template> |
||||
|
<!-- upload --> |
||||
|
<div class="upload_cover"> |
||||
|
<!-- <el-upload |
||||
|
class="upload-demo" |
||||
|
drag |
||||
|
:action="upload_qiniu_url" |
||||
|
:show-file-list="false" |
||||
|
:on-success="handleAvatarSuccess" |
||||
|
:on-error="handleError" |
||||
|
:before-upload="beforeAvatarUpload" |
||||
|
:data="qiniuData" |
||||
|
> |
||||
|
<img v-if="imageUrl" :src="imageUrl" class="avatar" /> |
||||
|
<div v-else class="el-default"> |
||||
|
<i class="el-icon-upload"></i> |
||||
|
</div> |
||||
|
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div> |
||||
|
</el-upload> --> |
||||
|
<el-upload |
||||
|
:action="upload_qiniu_url" |
||||
|
:show-file-list="false" |
||||
|
:on-success="handleAvatarSuccess" |
||||
|
:on-error="handleError" |
||||
|
:before-upload="beforeAvatarUpload" |
||||
|
:data="qiniuData" |
||||
|
list-type="picture-card" |
||||
|
> |
||||
|
<div class="avatar-uploader"> |
||||
|
<img v-if="imageUrl" :src="imageUrl" class="avatar" alt /> |
||||
|
<div class="el-default"> |
||||
|
<img src="@/assets/images/t-sc.png" alt /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div> |
||||
|
</el-upload> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { getQiniuToken } from '@/api/material/material' |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
imageUrl: '', |
||||
|
qiniuData: { |
||||
|
key: '', |
||||
|
token: '' |
||||
|
}, |
||||
|
// 七牛云的上传地址，根据自己所在地区选择，我这里是华南区 |
||||
|
upload_qiniu_url: 'https://upload.qiniup.com/', |
||||
|
// 这是七牛云空间的外链默认域名 |
||||
|
upload_qiniu_addr: 'qiniu.aiyxlib.com' |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.getQiniuToken() |
||||
|
}, |
||||
|
methods: { |
||||
|
getQiniuToken() { |
||||
|
const _this = this |
||||
|
getQiniuToken().then(res => { |
||||
|
if (res.code == 200) { |
||||
|
this.qiniuData.token = res.data |
||||
|
} else { |
||||
|
_this.$message({ |
||||
|
message: res.msg, |
||||
|
duration: 2000, |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 验证文件合法性 |
||||
|
beforeAvatarUpload(file) { |
||||
|
this.qiniuData.key = file.name |
||||
|
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' |
||||
|
const isLt2M = file.size / 1024 / 1024 < 2 |
||||
|
if (!isJPG) { |
||||
|
this.$message.error('图片只支持bmp、jpg、png、gif格式的文件 !') |
||||
|
} |
||||
|
if (!isLt2M) { |
||||
|
this.$message.error('图片大小不能超过 2MB !') |
||||
|
} |
||||
|
return isJPG && isLt2M |
||||
|
}, |
||||
|
handleAvatarSuccess: function(res, file) { |
||||
|
this.imageUrl = 'http://' + this.upload_qiniu_addr + '/' + res.key |
||||
|
console.log(this.imageUrl) |
||||
|
this.$message({ |
||||
|
message: '上传成功', |
||||
|
duration: 2000, |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
}, |
||||
|
handlePictureCardPreview(file) { |
||||
|
this.imageUrl = 'http://' + this.upload_qiniu_addr + '/' + res.key |
||||
|
this.dialogVisible = true |
||||
|
}, |
||||
|
handleError: function(res) { |
||||
|
this.$message({ |
||||
|
message: '上传失败', |
||||
|
duration: 2000, |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
/* .avatar-uploader .el-upload { |
||||
|
border: 5px dashed #ca1717 !important; |
||||
|
border-radius: 6px; |
||||
|
cursor: pointer; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.avatar-uploader .el-upload:hover { |
||||
|
border-color: #409EFF; |
||||
|
} */ |
||||
|
/* .avatar-uploader-icon { |
||||
|
font-size: 28px; |
||||
|
color: #8c939d; |
||||
|
width: 178px; |
||||
|
height: 178px; |
||||
|
line-height: 178px; |
||||
|
text-align: center; |
||||
|
} */ |
||||
|
.avatar { |
||||
|
width: 178px; |
||||
|
height: 178px; |
||||
|
display: block; |
||||
|
} |
||||
|
</style> |
||||
@ -1,105 +0,0 @@ |
|||||
<template> |
|
||||
<!-- upload --> |
|
||||
<div class="upload"> |
|
||||
<el-upload |
|
||||
class="avatar-uploader" |
|
||||
:action="domain" |
|
||||
:http-request="upqiniu" |
|
||||
:show-file-list="false" |
|
||||
:before-upload="beforeUpload" |
|
||||
> |
|
||||
<img v-if="imageUrl" :src="imageUrl" class="avatar" /> |
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
|
||||
</el-upload> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
import axios from 'axios' |
|
||||
import { getQiniuToken } from '@/api/material/material' |
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
imageUrl: '', |
|
||||
token: {}, |
|
||||
// 七牛云的上传地址，根据自己所在地区选择，我这里是华南区 |
|
||||
domain: 'https://upload.qiniup.com/', |
|
||||
// 这是七牛云空间的外链默认域名 |
|
||||
qiniuaddr: 'qiniu.aiyxlib.com' |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
// 上传文件到七牛云 |
|
||||
upqiniu(req) { |
|
||||
console.log(req) |
|
||||
const config = { |
|
||||
headers: { 'Content-Type': 'multipart/form-data' } |
|
||||
} |
|
||||
let filetype = '' |
|
||||
if (req.file.type === 'image/png') { |
|
||||
filetype = 'png' |
|
||||
} else { |
|
||||
filetype = 'jpg' |
|
||||
} |
|
||||
// 重命名要上传的文件 |
|
||||
const keyname = 'material' + Math.random() * 100 + '.' + filetype |
|
||||
// 从后端获取上传凭证token |
|
||||
getQiniuToken().then(res => { |
|
||||
console.log(res) |
|
||||
const formdata = new FormData() |
|
||||
formdata.append('file', req.file) |
|
||||
formdata.append('token', res.data) |
|
||||
formdata.append('key', keyname) |
|
||||
// 获取到凭证之后再将文件上传到七牛云空间 |
|
||||
axios.post(this.domain, formdata, config).then(res => { |
|
||||
this.imageUrl = 'http://' + this.qiniuaddr + '/' + res.data.key |
|
||||
console.log(this.imageUrl) |
|
||||
}) |
|
||||
}) |
|
||||
// this.axios.get('/up/token').then(res => { |
|
||||
|
|
||||
// }) |
|
||||
}, |
|
||||
// 验证文件合法性 |
|
||||
beforeUpload(file) { |
|
||||
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' |
|
||||
const isLt2M = file.size / 1024 / 1024 < 10 |
|
||||
if (!isJPG) { |
|
||||
this.$message.error('上传头像图片只能是 JPG 格式!') |
|
||||
} |
|
||||
if (!isLt2M) { |
|
||||
this.$message.error('上传头像图片大小不能超过 10MB!') |
|
||||
} |
|
||||
return isJPG && isLt2M |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style scoped> |
|
||||
.upload { |
|
||||
width: 600px; |
|
||||
margin: 0 auto; |
|
||||
} |
|
||||
.avatar-uploader .el-upload { |
|
||||
border: 5px dashed #ca1717 !important; |
|
||||
border-radius: 6px; |
|
||||
cursor: pointer; |
|
||||
position: relative; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
.avatar-uploader .el-upload:hover { |
|
||||
border-color: #409EFF; |
|
||||
} |
|
||||
.avatar-uploader-icon { |
|
||||
font-size: 28px; |
|
||||
color: #8c939d; |
|
||||
width: 178px; |
|
||||
height: 178px; |
|
||||
line-height: 178px; |
|
||||
text-align: center; |
|
||||
} |
|
||||
.avatar { |
|
||||
width: 178px; |
|
||||
height: 178px; |
|
||||
display: block; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,161 +0,0 @@ |
|||||
<template> |
|
||||
<div id="mef-m-authentication-apply"> |
|
||||
<div class="apply-upload-item fr noMb"> |
|
||||
<div class="photo-upload item-03" :class="{uploaded: userWorkPhoto}" @click="photoUpload('userWorkPhoto')"> |
|
||||
<img :src="userWorkPhoto" onerror="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII='" class="fit-cover-img" /> |
|
||||
<span v-if="userWorkPhoto" class="delete-icon" @click.stop="clearPhotoUrl('userWorkPhoto')"></span> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
/* function getQiniuToken() { |
|
||||
return Promise.resolve({'uptoken': 'xxx'}); |
|
||||
} */ |
|
||||
|
|
||||
// c39eAF6CRLXTPcOp7YZWN47QG-R8GMdJwBtBQ1Eb:vQEKW6kSJvaMFOD6G0Fj1toohjE=:eyJzY29wZSI6ImFpeXVleGluZzoiLCJkZWFkbGluZSI6MTY0NzU3NjY4N30= |
|
||||
|
|
||||
/* c39eAF6CRLXTPcOp7YZWN47QG-R8GMdJwBtBQ1Eb:MZKUih1U9m0jKz57RwADJw02a9U=:eyJwZXJzaXN0ZW50UGlwZWxpbmUiOiJhaXl4bGliX3ZpZGVvLXBpcGUiLCJzY29wZSI6ImFpeXVleGluZyIsInBlcnNpc3RlbnRPcHMiOiJhdnRodW1iL20zdTgvbm9Eb21haW4vMS9zZWd0aW1lLzE1L3ZiLzQ0MGsvaGxzS2V5L2Z0em4xOWFpeXhsaWIyMDEvaGxzS2V5VXJsL2h0dHBzOi8vcWluaXUuYWl5eGxpYi5jb20vYWl4eWxpYndvcmQua2V5fHNhdmVhcy8iLCJkZWFkbGluZSI6MTY0NzU3NjcxOX0=*/ |
|
||||
import { getQiniuToken } from '@/api/material/material' |
|
||||
export default { |
|
||||
name: 'Upload', |
|
||||
data() { |
|
||||
return { |
|
||||
userWorkPhoto: '' |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
|
|
||||
}, |
|
||||
methods: { |
|
||||
clearPhotoUrl(urlName) { |
|
||||
this[urlName] = '' |
|
||||
}, |
|
||||
photoUpload(type) { |
|
||||
const ipt = document.createElement('input') |
|
||||
ipt.setAttribute('type', 'file') |
|
||||
ipt.setAttribute('accept', 'image/*') |
|
||||
ipt.style.width = 0 |
|
||||
ipt.style.height = 0 |
|
||||
ipt.addEventListener('change', async() => { |
|
||||
const [file] = ipt.files |
|
||||
const base64Img = await this.fileToBase64(file) |
|
||||
const url = await this.uploadBase64(base64Img) |
|
||||
this.userWorkPhoto = url |
|
||||
document.body.removeChild(ipt) |
|
||||
}) |
|
||||
document.body.appendChild(ipt) |
|
||||
ipt.click() |
|
||||
}, |
|
||||
uploadBase64(base64Img) { |
|
||||
return new Promise((resolve) => { |
|
||||
getQiniuToken() |
|
||||
.then(res => { |
|
||||
const key = 'qiniu.aiyxlib.com' + this.uuid() + '.jpg' |
|
||||
const pic = base64Img.split(',')[1] |
|
||||
// const url = 'https://upload.qiniup.com/' + window.btoa(key) // 非华东空间需要根据注意事项 1 修改上传域名 |
|
||||
const url = 'https://upload.qiniup.com/' // 非华东空间需要根据注意事项 1 修改上传域名 |
|
||||
const xhr = new XMLHttpRequest() |
|
||||
xhr.onreadystatechange = () => { |
|
||||
if (xhr.readyState == 4) { |
|
||||
resolve( |
|
||||
'qiniu.aiyxlib.com' + JSON.parse(xhr.responseText).key |
|
||||
) |
|
||||
} |
|
||||
} |
|
||||
xhr.open('POST', url, true) |
|
||||
xhr.setRequestHeader('Content-Type', 'application/octet-stream') |
|
||||
xhr.setRequestHeader('Authorization', 'UpToken ' + res.data) |
|
||||
xhr.send(pic) |
|
||||
// 获取到凭证之后再将文件上传到七牛云空间 |
|
||||
}) |
|
||||
.catch(console.error) |
|
||||
}) |
|
||||
}, |
|
||||
fileToBase64(file) { |
|
||||
return new Promise((resolve) => { |
|
||||
const reader = new FileReader() |
|
||||
// 传入一个参数对象即可得到基于该参数对象的文本内容 |
|
||||
reader.readAsDataURL(file) |
|
||||
reader.onload = function(e) { |
|
||||
// target.result 该属性表示目标对象的DataURL |
|
||||
resolve(e.target.result) |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
uuid(len, radix) { |
|
||||
const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('') |
|
||||
const uuid = [] |
|
||||
let i |
|
||||
radix = radix || chars.length |
|
||||
if (len) { |
|
||||
for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix] |
|
||||
} else { |
|
||||
let r |
|
||||
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '' |
|
||||
uuid[14] = '4' |
|
||||
for (i = 0; i < 36; i++) { |
|
||||
if (!uuid[i]) { |
|
||||
r = 0 | Math.random() * 16 |
|
||||
uuid[i] = chars[i == 19 ? r & 0x3 | 0x8 : r] |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
return uuid.join('') |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
#mef-m-authentication-apply{ |
|
||||
.apply-upload-item{ |
|
||||
width: 132px; |
|
||||
margin-bottom: 30px; |
|
||||
text-align: center; |
|
||||
&.noMb{ |
|
||||
margin-bottom: 0; |
|
||||
} |
|
||||
.photo-upload { |
|
||||
width: 132px; |
|
||||
height: 96px; |
|
||||
position: relative; |
|
||||
margin-bottom: 10px; |
|
||||
&.item-03{ |
|
||||
// background: top / 100% url(~@/assets/images/authentication/upload_workCard.png) |
|
||||
// no-repeat; |
|
||||
} |
|
||||
&.uploaded{ |
|
||||
background: none; |
|
||||
} |
|
||||
img{ |
|
||||
width: 85px; |
|
||||
height: 85px; |
|
||||
position: absolute; |
|
||||
left: 50%; |
|
||||
top: 50%; |
|
||||
transform: translate(-50%,-50%); |
|
||||
} |
|
||||
.delete-icon{ |
|
||||
width: 16px; |
|
||||
height: 16px; |
|
||||
// background: top / 100% url(~@/assets/images/common/icon-del.png) |
|
||||
// no-repeat; |
|
||||
border-radius: 0; |
|
||||
top: -8px; |
|
||||
right: -8px; |
|
||||
position: absolute; |
|
||||
i { |
|
||||
display: none; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.apply-name{ |
|
||||
font-size: 14px; |
|
||||
font-weight: bold; |
|
||||
padding-top: 10px; |
|
||||
text-align: center; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,199 +0,0 @@ |
|||||
<template> |
|
||||
<div class="upload"> |
|
||||
<div id="video_container"> |
|
||||
<!-- <div id="pickfiles">上传视频</div> --> |
|
||||
<div id="pickfiles"><el-button style="margin-top: 5px" type="primary" @click="initUploader">上传视频</el-button></div> |
|
||||
<div> |
|
||||
<div class="upload_info"> |
|
||||
<b>共{{ fileSize }}MB | 已上传{{ fileLoaded }} | 上传速度{{ fileSpeed }}/s</b> |
|
||||
</div> |
|
||||
<div> |
|
||||
<b>上传进度：{{ filePercent }}%</b> |
|
||||
</div> |
|
||||
<button @click="pauseUpload">暂停上传</button> |
|
||||
<button @click="continueUpload">继续上传</button> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="coverPic" class="cover-pic"> |
|
||||
<img :src="coverPic" alt="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
// import { apis, chttp } from '@/libs/interfaces' |
|
||||
// import * as qiniu from 'qiniu-js' |
|
||||
import axios from 'axios' |
|
||||
require('../../../static/dist/qiniu.min') |
|
||||
// import { Uploader } from 'qiniup' |
|
||||
// import { getQiniuToken } from '@/api/material/material' |
|
||||
export default { |
|
||||
name: 'Qiniu', |
|
||||
data() { |
|
||||
return { |
|
||||
fileSize: 0, |
|
||||
fileLoaded: 0, |
|
||||
fileSpeed: 0, |
|
||||
filePercent: 0, |
|
||||
uploader: null, |
|
||||
token: '', |
|
||||
filename: '', |
|
||||
hash: '', |
|
||||
resFileName: '', |
|
||||
coverPic: '', |
|
||||
phoneType: null |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.phoneType = this.getPhoneType() |
|
||||
this.getToken(() => { |
|
||||
this.initUploader() |
|
||||
}) |
|
||||
}, |
|
||||
methods: { |
|
||||
pauseUpload() { |
|
||||
this.uploader.stop() |
|
||||
}, |
|
||||
continueUpload() { |
|
||||
this.uploader.start() |
|
||||
}, |
|
||||
toDecimal(size) { |
|
||||
size = size / 1024 / 1024 |
|
||||
var f = parseFloat(size) |
|
||||
if (isNaN(f)) { |
|
||||
return |
|
||||
} |
|
||||
f = Math.round(size * 10) / 10 |
|
||||
var s = f.toString() |
|
||||
var rs = s.indexOf('.') |
|
||||
if (rs < 0) { |
|
||||
rs = s.length |
|
||||
s += '.' |
|
||||
} |
|
||||
while (s.length <= rs + 1) { |
|
||||
s += '0' |
|
||||
} |
|
||||
return s |
|
||||
}, |
|
||||
initUploader() { |
|
||||
const plupload = window.plupload |
|
||||
const Qiniu = global.qiniu |
|
||||
const _this = this |
|
||||
// domain为七牛空间对应的域名，选择某个空间后，可通过 空间设置->基本设置->域名设置 查看获取 |
|
||||
const isIphone5 = this.phoneType === '5' |
|
||||
// uploader为一个plupload对象，继承了所有plupload的方法 |
|
||||
this.uploader = Qiniu.uploader({ |
|
||||
runtimes: 'html5,flash,html4', // 上传模式，依次退化 |
|
||||
browse_button: 'pickfiles', // 上传选择的点选按钮，必需 |
|
||||
uptoken: this.token, // uptoken是上传凭证，由其他程序生成 |
|
||||
get_new_uptoken: true, // 设置上传文件的时候是否每次都重新获取新的uptoken |
|
||||
bucket_name: 'common-web', // 空间名 |
|
||||
unique_names: false, // 默认false，key为文件名。若开启该选项，JS-SDK会为每个文件自动生成key（文件名） |
|
||||
save_key: false, // 默认false。若在服务端生成uptoken的上传策略中指定了sava_key，则开启，SDK在前端将不对key进行任何处理 |
|
||||
domain: 'https://upload.qiniup.com/', // bucket domain eg:http://qiniu-plupload.qiniudn.com/ |
|
||||
container: 'video_container', // 上传区域DOM ID，默认是browser_button的父元素 |
|
||||
max_file_size: '10mb', // 最大文件体积限制 |
|
||||
dragdrop: false, // 开启可拖曳上传 |
|
||||
drop_element: 'video_container', // 拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传 |
|
||||
chunk_size: '4mb', // 分块上传时，每块的体积 |
|
||||
max_retries: 3, // 上传失败最大重试次数 |
|
||||
auto_start: true, // 选择文件后自动上传，若关闭需要自己绑定事件触发上传 |
|
||||
multi_selection: !isIphone5, |
|
||||
init: { |
|
||||
Key: function(up, files) { |
|
||||
return _this.filename |
|
||||
}, |
|
||||
FilesAdded: function(up, files) { |
|
||||
plupload.each(files, function(file) { |
|
||||
// 文件添加进队列后，处理相关的事情 |
|
||||
console.log('FilesAdded') |
|
||||
_this.fileSize = _this.toDecimal(file.size) |
|
||||
}) |
|
||||
}, |
|
||||
BeforeUpload: function(up, file) { |
|
||||
console.log('BeforeUpload') |
|
||||
}, |
|
||||
ChunkUploaded: function(up, file, info) { |
|
||||
console.log('ChunkUploaded') |
|
||||
}, |
|
||||
UploadProgress: function(up, file) { |
|
||||
// 每个文件上传时，处理相关的事情 |
|
||||
_this.filePercent = parseInt(file.percent) |
|
||||
_this.fileLoaded = plupload.formatSize(file.loaded).toUpperCase() |
|
||||
_this.fileSpeed = plupload.formatSize(file.speed).toUpperCase() |
|
||||
}, |
|
||||
FileUploaded: function(up, file, info) { |
|
||||
console.log('FileUploaded') |
|
||||
const response = JSON.parse(info.response) |
|
||||
_this.hash = response.hash |
|
||||
_this.resFileName = response.key |
|
||||
_this.coverPic = 'qiniu.aiyxlib.com' + response.key + '?vframe/png/offset/7/w/480' |
|
||||
}, |
|
||||
Error: function(up, err, errTip) { |
|
||||
// 上传出错时，处理相关的事情 |
|
||||
_this.$toast('Error =') |
|
||||
_this.$toast(err) |
|
||||
_this.$toast('errTip =') |
|
||||
_this.$toast(errTip) |
|
||||
}, |
|
||||
UploadComplete: function() { |
|
||||
// 队列文件处理完毕后，处理相关的事情 |
|
||||
_this.$toast('UploadComplete') |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
getToken(callback) { |
|
||||
this.filename = 'webvideo/' + new Date().getTime() + '.mp4' |
|
||||
const params = { |
|
||||
filename: this.filename |
|
||||
} |
|
||||
// chttp.get(apis.qiniuToken, { params: params }) |
|
||||
// .then(res => { |
|
||||
// this.token = res.token |
|
||||
// callback() |
|
||||
// }) |
|
||||
// 获取到凭证之后再将文件上传到七牛云空间 |
|
||||
axios.get('http://192.168.99.84:7000/api/qiniu/uploadTokenCover', { params: params }) |
|
||||
.then(res => { |
|
||||
this.token = res.data |
|
||||
callback() |
|
||||
}) |
|
||||
}, |
|
||||
getPhoneType() { |
|
||||
// 正则,忽略大小写 |
|
||||
var patternPhone = new RegExp('iphone', 'i') |
|
||||
var patternAndroid = new RegExp('Android', 'i') |
|
||||
var userAgent = navigator.userAgent.toLowerCase() |
|
||||
var isAndroid = patternAndroid.test(userAgent) |
|
||||
var isIphone = patternPhone.test(userAgent) |
|
||||
var phoneType = 'phoneType' |
|
||||
if (isAndroid) { |
|
||||
var zhCnIndex = userAgent.indexOf('-') |
|
||||
var spaceIndex = userAgent.indexOf('build', zhCnIndex + 4) |
|
||||
var fullResult = userAgent.substring(zhCnIndex, spaceIndex) |
|
||||
phoneType = fullResult.split('')[1] |
|
||||
} else if (isIphone) { |
|
||||
// 6 w=375 6plus w=414 5s w=320 5 w=320 |
|
||||
var wigth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth |
|
||||
if (wigth > 400) { |
|
||||
phoneType = 'iphone6 plus' |
|
||||
} else if (wigth > 370) { |
|
||||
phoneType = 'iphone6' |
|
||||
} else if (wigth > 315) { |
|
||||
phoneType = '5' |
|
||||
} else { |
|
||||
phoneType = 'iphone 4s' |
|
||||
} |
|
||||
} else { |
|
||||
phoneType = '您的设备太先进了' |
|
||||
} |
|
||||
return phoneType |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
</style> |
|
||||
|
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue