wz_shi
4 years ago
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