6 changed files with 478 additions and 11 deletions
-
8.env.development
-
6src/api/material/material.js
-
105src/views/components/upload_img.vue
-
161src/views/components/upload_img2.vue
-
187src/views/components/upload_img3.vue
-
22src/views/materialContent/materialList/index.vue
@ -0,0 +1,105 @@ |
|||
<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> |
|||
@ -0,0 +1,161 @@ |
|||
<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> |
|||
@ -0,0 +1,187 @@ |
|||
<template> |
|||
<div class="upload"> |
|||
<div id="video_container"> |
|||
<div id="pickfiles">上传视频</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' |
|||
export default { |
|||
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() |
|||
}) |
|||
}, |
|||
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