图片分辨率
getImageInfo(url, callback) {
const reader = new FileReader()
reader.readAsDataURL(url)
reader.onload = function() {
if (reader.readyState === 2) {
const img = new Image()
img.src = reader.result
img.onload = function() {
callback(img.width, img.height)
}
}
}
},
that.getImageInfo(files[0], function(width, height) {
// 在这里面使用
})
<template>
<div class="content">
<div class="uploadbox">
<el-upload
ref="upload"
:show-file-list="false"
drag
action="#"
:before-upload="handleChange"
:http-request="uploadHttpRequest"
accept=".zip"
>
<i class="el-icon-upload" />
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div slot="tip" class="el-upload__tip">
只能上传zip文件
</div>
</el-upload>
</div>
<el-dialog
title="上传"
:visible.sync="dialogVisible"
width="500px"
:close-on-press-escape="false"
:close-on-click-modal="false"
:show-close="zippercent == 100 || zippercent == -1"
@close="closeDialog"
>
<div class="redtext">注意：上传过程中请勿刷新或关闭当前网页</div>
<div class="namebox">
<div class="left">
{{ zipname }}
</div>
<div v-if="zippercent == -1">
<i class="el-icon-warning" /><span
class="ml10"
>上传失败</span>
</div>
<div v-else-if="zippercent == -2">
<i class="el-icon-loading" />
<span class="ml10">文件检验中</span>
</div>
<div v-else>
<div v-if="zippercent != 100" class="right">
{{ zippercent }}%
<span
class="ml10"
>{{
parseInt(num) + Math.floor(Math.random() * 100 + 1)
}}kb/s</span>
</div>
<div v-if="zippercent == 100">
<i class="el-icon-success" />
<span class="ml10">上传成功</span>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import { dictList } from '@/api/index'
import { materialAdd } from '@/api/v2.0/upload'
import messageup from '@/utils/resetMessage'
import JsZip from 'jszip'
const getDate = function() {
const D = new Date()
const year = D.getFullYear()
const month = D.getMonth() + 1
const date = D.getDate()
const hours = D.getHours()
const mins = D.getMinutes()
const secs = D.getSeconds()
return `${year}${month}${date}${hours}${mins}${secs}`
}
export default {
name: 'Upload',
data() {
return {
zippercent: 0,
dialogVisible: false,
num: 0,
zipname: '',
accepts: ['application/zip', 'application/x-zip-compressed', 'application/x-zip'],
filenameArray: [],
saveFile: '',
typeList: [],
saveZipurl: '',
saveResolute: '',
savexMax: '',
saveyMax: '',
savetargetName: [],
isWidthHeight: false,
saveFolder: ''
}
},
watch: {},
created() {},
mounted() {
this.getTypeList()
},
methods: {
// 获取类型枚举
getTypeList() {
dictList().then(res => {
this.typeList = res.datas.typeList
})
},
// 具体规则看 assets/book.jpg
uploadHttpRequest() {},
isAllTypeName(array) {
if (array.length > 0) {
return !array.some(function(value, index) {
return value !== array[0]
})
} else {
return true
}
},
isAllWidthHeight(array) {
if (array.length > 0) {
return !array.some(function(value, index) {
return (
value.height !== array[0].height || value.width !== array[0].width
)
})
} else {
return true
}
},
handleChange(file) {
console.log(file)
const that = this
that.zippercent = 0
that.saveFile = file
that.zipname = file.name.substring(0, file.name.lastIndexOf('.'))
const isAccept = that.accepts.includes(file.type)
if (!isAccept) {
that.$message.warning('请上传zip格式文件')
return
}
that.dialogVisible = true
that.zippercent = -2
var new_zip = new JsZip()
new_zip.loadAsync(file).then(zip => {
var isExistDir = false
that.filenameArray = []
for (const name in zip.files) {
const target = zip.files[name]
that.filenameArray.push(zip.files[name])
if (target.dir) {
isExistDir = true
continue
}
}
if (isExistDir) {
that.$message.warning(
'压缩包内仅包含图片文件，不得有其他文件或文件夹'
)
that.dialogVisible = false
return
} else {
const length = Object.keys(zip.files).length
if (
length === 72 ||
length === 120 ||
length === 360 ||
length === 200 ||
length === 648
) {
console.log('开始校验promise', new Date())
const promises = []
for (let i = 0; i < length; i++) {
var name = that.filenameArray[i].name
promises.push(
new Promise((resolve, reject) => {
// 解压图片并转换为base64
zip
.file(name)
.async('base64')
.then(base64 => {
const img = new Image()
img.onload = e => {
const { width, height } = img
if (width !== height) {
reject('有文件尺寸错误，请上传1:1比例的图片')
that.dialogVisible = false
return
} else {
resolve(img)
}
}
img.onerror = e => {
reject('有文件读取失败，请检查该文件是否正常')
that.dialogVisible = false
}
img.src = `data:image/png;base64,${base64}`
})
})
)
}
Promise.all(promises)
.then(list => {
console.log('promise结束', new Date())
var istrueState = false
for (let index = 0; index < list.length; index++) {
that.saveResolute = {
width: list[0].width,
height: list[0].height
}
if (
list[index].width < 1500 ||
list[index].width > 3000 ||
list[index].height < 1500 ||
list[index].height > 3000
) {
istrueState = true
continue
}
}
if (istrueState) {
messageup({
type: 'warning',
showClose: false,
message: '分辨率要求在1500~3000之间'
})
that.dialogVisible = false
return
}
// console.log('length', length)
// console.log(that.isAllWidthHeightnum(list))
if (that.isAllWidthHeight(list) === true) {
if (length === 72) {
that.saveType = that.typeList.find(item => {
return item.name === '360'
})
that.savexMax = 72
that.saveyMax = 1
that.threeSixzero(zip, length, '360')
} else if (length === 120) {
that.saveType = that.typeList.find(item => {
return item.name === '540'
})
that.savexMax = 20
that.saveyMax = 5
that.fiveFourzero(zip, length, '540')
} else if (length === 360) {
that.saveType = that.typeList.find(item => {
return item.name === '540 Pro'
})
that.savexMax = 36
that.saveyMax = 9
that.fiveFourzeropro(zip, length, '540Pro')
} else if (length === 200) {
that.saveType = that.typeList.find(item => {
return item.name === '720'
})
that.savexMax = 20
that.saveyMax = 5
that.sevenTwozero(zip, length, '720')
} else if (length === 648) {
that.saveType = that.typeList.find(item => {
return item.name === '720 Pro'
})
that.savexMax = 36
that.saveyMax = 9
that.sevenTwozeropro(zip, length, '720Pro')
}
} else {
that.$message.warning('素材图片分辨率不一致')
that.dialogVisible = false
return
}
})
.catch(msg => {
messageup({
type: 'warning',
showClose: false,
message: msg
})
})
} else {
that.$message.warning(
'压缩包内图片数量错误，请校对各个模式(360,540,540 Pro,720,720 Pro)下的数量规则'
)
that.dialogVisible = false
return
}
}
})
},
// 360判断 72
threeSixzero(zip, length, typeName) {
const that = this
var isNametrue = false
that.savetargetName = []
for (const name in zip.files) {
const target = zip.files[name]
that.savetargetName.push(target.name)
if (target.name.split('.')[0] === '00') {
isNametrue = true
continue
}
if (parseInt(target.name.split('.')[0]) > 72) {
isNametrue = true
continue
}
if (!/^([0-9][0-9]).(jpg)$/.test(target.name)) {
isNametrue = true
continue
}
}
if (isNametrue) {
messageup({
type: 'warning',
showClose: false,
message: '文件名格式不正确'
})
that.dialogVisible = false
return
} else {
that.uploadZip(that.saveFile, length, typeName)
}
},
// 540判断 120
fiveFourzero(zip, length, typeName) {
const that = this
var isNametrue = false
that.savetargetName = []
for (const name in zip.files) {
const target = zip.files[name]
const first_num = target.name.split('.')[0].split('-')[0]
const second_num = target.name.split('.')[0].split('-')[1]
const imgType = target.name.split('.')[1]
that.savetargetName.push(target.name)
if (!/^([0][0-5])$/.test(first_num)) {
isNametrue = true
continue
}
if (!/^([0-2][0-9])$/.test(second_num)) {
isNametrue = true
continue
}
if (parseInt(second_num) === 0) {
isNametrue = true
continue
}
if (parseInt(second_num) > 20) {
isNametrue = true
continue
}
if (imgType !== 'jpg') {
isNametrue = true
continue
}
}
if (isNametrue) {
messageup({
type: 'warning',
showClose: false,
message: '文件名格式不正确'
})
that.dialogVisible = false
return
}
that.uploadZip(that.saveFile, length, typeName)
},
// 540pro判断 360
fiveFourzeropro(zip, length, typeName) {
const that = this
var isNametrue = false
that.savetargetName = []
for (const name in zip.files) {
const target = zip.files[name]
that.savetargetName.push(target.name)
const first_num = target.name.split('.')[0].split('-')[0]
const second_num = target.name.split('.')[0].split('-')[1]
const imgType = target.name.split('.')[1]
if (!/^([0][0-9])$/.test(first_num)) {
isNametrue = true
continue
}
if (!/^([0-3][0-9])$/.test(second_num)) {
isNametrue = true
continue
}
if (parseInt(second_num) === 0) {
isNametrue = true
continue
}
if (parseInt(second_num) > 36) {
isNametrue = true
continue
}
if (imgType !== 'jpg') {
isNametrue = true
continue
}
}
if (isNametrue) {
messageup({
type: 'warning',
showClose: false,
message: '文件名格式不正确'
})
that.dialogVisible = false
return
}
that.uploadZip(that.saveFile, length, typeName)
},
// 720判断 200
sevenTwozero(zip, length, typeName) {
const that = this
var isNametrue = false
var Narray = []
var Sarray = []
that.savetargetName = []
for (const name in zip.files) {
const target = zip.files[name]
that.savetargetName.push(target.name)
const NS = target.name.split('.')[0].split('-')[0]
if (NS === 'N') {
Narray.push(NS)
}
if (NS === 'S') {
Sarray.push(NS)
}
if (NS !== 'N' && NS !== 'S') {
isNametrue = true
continue
}
const first_num = target.name.split('.')[0].split('-')[1]
const second_num = target.name.split('.')[0].split('-')[2]
const imgType = target.name.split('.')[1]
if (!/^([0][1-5])$/.test(first_num)) {
isNametrue = true
continue
}
if (!/^([0-2][0-9])$/.test(second_num)) {
isNametrue = true
continue
}
if (parseInt(second_num) === 0) {
isNametrue = true
continue
}
if (parseInt(second_num) > 20) {
isNametrue = true
continue
}
if (imgType !== 'jpg') {
isNametrue = true
continue
}
}
if (isNametrue) {
messageup({
type: 'warning',
showClose: false,
message: '文件名格式不正确'
})
that.dialogVisible = false
return
}
if (Narray.length !== 100 || Sarray.length !== 100) {
messageup({
type: 'warning',
showClose: false,
message: '文件名格式不正确'
})
that.dialogVisible = false
return
}
that.uploadZip(that.saveFile, length, typeName)
},
// 720pro判断 648
sevenTwozeropro(zip, length, typeName) {
const that = this
var isNametrue = false
var Narray = []
var Sarray = []
that.savetargetName = []
for (const name in zip.files) {
const target = zip.files[name]
that.savetargetName.push(target.name)
const NS = target.name.split('.')[0].split('-')[0]
if (NS === 'N') {
Narray.push(NS)
}
if (NS === 'S') {
Sarray.push(NS)
}
if (NS !== 'N' && NS !== 'S') {
isNametrue = true
continue
}
const first_num = target.name.split('.')[0].split('-')[1]
const second_num = target.name.split('.')[0].split('-')[2]
const imgType = target.name.split('.')[1]
if (!/^([0][1-9])$/.test(first_num)) {
isNametrue = true
continue
}
if (!/^([0-3][0-9])$/.test(second_num)) {
isNametrue = true
continue
}
if (parseInt(second_num) === 0) {
isNametrue = true
continue
}
if (parseInt(second_num) > 36) {
isNametrue = true
continue
}
if (imgType !== 'jpg') {
isNametrue = true
continue
}
}
if (isNametrue) {
messageup({
type: 'warning',
showClose: false,
message: '文件名格式不正确'
})
that.dialogVisible = false
return
}
if (Narray.length !== 324 || Sarray.length !== 324) {
messageup({
type: 'warning',
showClose: false,
message: '文件名格式不正确'
})
that.dialogVisible = false
return
}
that.uploadZip(that.saveFile, length, typeName)
},
uploadZip(file, length, typeName) {
const that = this
that.saveFolder = getDate() + '_' + typeName
that.zippercent = 0
that.$newalioss
.upload({
file,
// folder: 'zipmoviebooktest-decompression',
// folder: 'srczipmoviebooktest',
folder: that.saveFolder,
progress: percent => {
percent = ~~(percent * 100)
that.num = (percent - that.zippercent) * (file.size / 1024) * 0.01
that.zippercent = percent === 100 ? 99 : percent
}
})
.then(({ relative, absolute }) => {
// console.log(relative)
console.log(absolute)
that.saveZipurl = absolute
console.log('得到zip包地址开始交互', new Date())
that._materialAdd(Number(length))
// 调取一个接口this.zippercent = 100
})
.catch(msg => {
that.zippercent = -1
})
.finally(e => {})
},
_materialAdd(length) {
const that = this
// console.log(that.savetargetName)
// https://media-manual.oss-cn-beijing.aliyuncs.com/oss/model/unzip/2022627211258_540/00-01.jpg
const img_urlarr = that.savetargetName
const img_urlobj = {}
img_urlarr.forEach(item => {
img_urlobj[item.substring(0, item.lastIndexOf('.'))] =
'https://media-manual.oss-cn-beijing.aliyuncs.com/oss/model/unzip/' +
that.saveFolder +
'/' +
item
})
const params = {
name: that.zipname,
type: that.saveType.id,
zip_url: that.saveZipurl,
img_url: img_urlobj,
xMax: that.savexMax,
yMax: that.saveyMax,
poster: '',
poster_url: '',
resolute: that.saveResolute
}
if (length === 72) {
params.poster = '01'
params.poster_url =
'https://media-manual.oss-cn-beijing.aliyuncs.com/oss/model/unzip/' +
that.saveFolder +
'/01.jpg'
} else if (length === 120) {
params.poster = '00-01'
params.poster_url =
'https://media-manual.oss-cn-beijing.aliyuncs.com/oss/model/unzip/' +
that.saveFolder +
'/00-01.jpg'
} else if (length === 360) {
params.poster = '00-01'
params.poster_url =
'https://media-manual.oss-cn-beijing.aliyuncs.com/oss/model/unzip/' +
that.saveFolder +
'/00-01.jpg'
} else if (length === 200) {
params.poster = 'N-01-01'
params.poster_url =
'https://media-manual.oss-cn-beijing.aliyuncs.com/oss/model/unzip/' +
that.saveFolder +
'/N-01-01.jpg'
} else if (length === 648) {
params.poster = 'N-01-01'
params.poster_url =
'https://media-manual.oss-cn-beijing.aliyuncs.com/oss/model/unzip/' +
that.saveFolder +
'/N-01-01.jpg'
}
materialAdd(params).then(res => {
if (res.status === 200) {
that.zippercent = 100
console.log('zip包地址接口上传成功等待解压', new Date())
} else {
that.$message.error(res.msg)
that.zippercent = -1
}
})
},
closeDialog() {
if (this.zippercent === -2 || this.zippercent === -1) {
return
}
if (
navigator.userAgent.indexOf('Firefox') !== -1 ||
navigator.userAgent.indexOf('Chrome') !== -1
) {
window.location.href = 'about:blank'
window.close()
} else {
window.opener = null
window.open('', '_self')
window.close()
}
}
}
}
</script>
<style lang="scss" scoped>
.content {
width: 100vw;
height: 100vh;
min-height: 500px;
display: flex;
.uploadbox {
margin: 15vh auto 0;
}
}
.el-upload__tip {
text-align: center;
padding-top: 10px;
}
.redtext {
font-weight: 400;
font-size: 12px;
color: rgb(255, 56, 56);
margin-top: 10px;
margin-left: 50px;
}
.namebox {
margin-left: 50px;
display: flex;
margin-top: 30px;
padding-bottom: 50px;
.left {
width: 250px;
color: rgba(0, 0, 0, 0.4);
font-size: 14px;
margin-right: 20px;
}
.right {
font-size: 14px;
color: rgb(29, 30, 31);
}
}
.el-icon-loading {
color: rgb(0, 168, 112);
}
.el-icon-success {
color: rgb(0, 168, 112);
}
.el-icon-warning {
color: rgb(227, 77, 89);
}
.ml10 {
margin-left: 10px;
}
</style>
'use strict'
import Vue from 'vue'
// import md5 from 'js-md5'
import OSS from 'ali-oss'
const client = new OSS({
region: 'oss-cn-beijing',
accessKeyId: 'LTAI5tMnN82db9sVbu1DEpXu',
accessKeySecret: 'dlXJjQNd27VS3lLH36zCUGwZRTwzHy',
bucket: 'media-manual',
secure: true
})
// const uuid = function() {
// function S4() {
// return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
// }
// return (S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4())
// }
const getDate = function() {
const D = new Date()
const year = D.getFullYear()
const month = D.getMonth() + 1
const date = D.getDate()
const hours = D.getHours()
const mins = D.getMinutes()
const secs = D.getSeconds()
return `${year}${month}${date}${hours}${mins}${secs}`
}
/**
* 阿里云OSS文件上传
* @param {file} file 需要上传的文件
* @param {string} folder 存储的文件夹
* @param {function} progress 进度回调
*/
Vue.prototype.$alioss = {
// folder 模型id商品id prefix项目名称 fileName：自带的文件名
upload({ file = null, folder, productid, modelid, progress = null }) {
if (productid === undefined) {
productid = 0
}
return new Promise((resolve, reject) => {
!file && reject('文件不能为空')
// console.log(file)
const { env } = window // 环境
const base =
env === 'development'
? 'test'
: ['dev', 'test'].includes(env)
? `${env}`
: ''
const prefix = '/htdocs/uploads/' // 前缀
// const suffix = (file.name || '').split('.').pop() // 文件后缀
// const fileName = `${getDate()}${md5(uuid())}.${suffix}` // 文件名
const modelnum = String(modelid) === '0' ? getDate() : modelid
const fileName = getDate() + '/' + productid + '/' + modelnum + '/' + window.encodeURIComponent(file.name) // 文件名
const intactPath = `${base}${prefix}${folder}/${fileName}` // 完整路径
const headers = {
// 指定该Object被下载时网页的缓存行为。
'Cache-Control': 'no-cache',
// 指定该Object被下载时的名称。
// 'Content-Disposition': 'oss_download.txt',
// 指定该Object被下载时的内容编码格式。
// 'Content-Encoding': 'UTF-8',
// 指定过期时间。
'Expires': getDate(),
// 指定Object的存储类型。
// 'x-oss-storage-class': 'Standard',
// 指定Object的访问权限。
// 'x-oss-object-acl': 'private',
// 设置Object的标签，可同时设置多个标签。
// 'x-oss-tagging': 'Tag1=1&Tag2=2',
// 指定CopyObject操作时是否覆盖同名目标Object。此处设置为true，表示禁止覆盖同名Object。
'x-oss-forbid-overwrite': 'false'
}
// console.log(fileName)
// console.log(intactPath)
// console.log(file)
// console.log(progress)
// client.options.key = fileName
// return
client
.multipartUpload(intactPath, file, { progress }, { headers })
.then(({ res }) => {
// status：出错请求的HTTP状态码
// statusCode：OSS的错误码
// message：OSS的错误信息
// eslint-disable-next-line no-unused-vars
const { status, statusCode, message, requestUrls } = res
if (status === 200 && statusCode === 200) {
// console.log(prefix + folder + fileName)
const path = {
relative: `${prefix}${folder}/${fileName}`, // 相对地址
absolute: requestUrls[0].split('?')[0] // oss绝对地址
}
// console.log(requestUrls[0])
// console.log(requestUrls[0].split('?')[0])
// console.log(path, message)
resolve(path)
} else {
// reject( message );
reject(null)
}
})
.catch(() => {
// reject( err.message );
reject(null)
})
})
}
}
/**
Vue.prototype.$alioss = function({ file = null, folder = 'other', progress = null }) {
return new Promise((resolve, reject) => {
!file && reject('文件不能为空');
let { env } = window //环境
, base = ['dev', 'test'].includes(env) ? `${env}` : ''
, prefix = '/htdocs/uploads/' //前缀
, suffix = (file.name || '').split('.').pop() //文件后缀
, fileName = `${getDate()}${md5(uuid())}.${suffix}` //文件名
, intactPath = `${base}${prefix}${folder}/${fileName}`; //完整路径
client.multipartUpload( intactPath, file, { progress }).then(({ res }) => {
let path = {
relative: `${prefix}${folder}/${fileName}`, //相对地址
absolute: res.requestUrls[0].split('?')[0] //oss绝对地址
};
console.log( path );
resolve( path );
}).catch( err => {
reject( err );
});
});
};
*/
/**
* 调用示例
this.$alioss({ file, folder: 'goodsPdf',
progress: percent => {
console.log(`${percent}%`);
}
}).then( src => {
console.log(src);
}).catch( e => {
this.$message.error( e );
});
*/
<template>
<div class="content">
<div class="uploadbox">
<el-upload
ref="upload"
:show-file-list="false"
drag
action="#"
:before-upload="handleChange"
:http-request="uploadHttpRequest"
accept=".zip"
>
<i class="el-icon-upload" />
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div slot="tip" class="el-upload__tip">
只能上传zip文件
</div>
</el-upload>
</div>
<el-dialog
title="上传"
:visible.sync="dialogVisible"
width="500px"
:close-on-press-escape="false"
:close-on-click-modal="false"
:show-close="zippercent == 100 || zippercent == -1"
@close="closeDialog"
>
<div class="redtext">注意：上传过程中请勿刷新或关闭当前网页</div>
<div class="namebox">
<div class="left">
{{ zipname }}
</div>
<div v-if="zippercent == -1">
<i class="el-icon-warning" /><span
class="ml10"
>上传失败</span>
</div>
<div v-else-if="zippercent == -2">
<i class="el-icon-loading" />
<span class="ml10">文件检验中</span>
</div>
<div v-else>
<div v-if="zippercent != 100" class="right">
{{ zippercent }}%
<span
class="ml10"
>{{
parseInt(num) + Math.floor(Math.random() * 100 + 1)
}}kb/s</span>
</div>
<div v-if="zippercent == 100">
<i class="el-icon-success" />
<span class="ml10">上传成功</span>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import { dictList } from '@/api/index'
import { materialAdd } from '@/api/v2.0/upload'
import messageup from '@/utils/resetMessage'
import JsZip from 'jszip'
const getDate = function() {
const D = new Date()
const year = D.getFullYear()
const month = D.getMonth() + 1
const date = D.getDate()
const hours = D.getHours()
const mins = D.getMinutes()
const secs = D.getSeconds()
return `${year}${month}${date}${hours}${mins}${secs}`
}
export default {
name: 'Upload',
data() {
return {
zippercent: 0,
dialogVisible: false,
num: 0,
zipname: '',
accepts: ['application/zip', 'application/x-zip-compressed', 'application/x-zip'],
filenameArray: [],
saveFile: '',
typeList: [],
saveZipurl: '',
saveResolute: '',
savexMax: '',
saveyMax: '',
savetargetName: [],
isWidthHeight: false,
saveFolder: ''
}
},
watch: {},
created() {},
mounted() {
this.getTypeList()
},
methods: {
// 获取类型枚举
getTypeList() {
dictList().then(res => {
this.typeList = res.datas.typeList
})
},
// 具体规则看 assets/book.jpg
uploadHttpRequest() {},
isAllTypeName(array) {
if (array.length > 0) {
return !array.some(function(value, index) {
return value !== array[0]
})
} else {
return true
}
},
isAllWidthHeight(array) {
if (array.length > 0) {
return !array.some(function(value, index) {
return (
value.height !== array[0].height || value.width !== array[0].width
)
})
} else {
return true
}
},
handleChange(file) {
console.log(file)
const that = this
that.zippercent = 0
that.saveFile = file
that.zipname = file.name.substring(0, file.name.lastIndexOf('.'))
const isAccept = that.accepts.includes(file.type)
if (!isAccept) {
that.$message.warning('请上传zip格式文件')
return
}
that.dialogVisible = true
that.zippercent = -2
var new_zip = new JsZip()
new_zip.loadAsync(file).then(zip => {
var isExistDir = false
that.filenameArray = []
for (const name in zip.files) {
const target = zip.files[name]
that.filenameArray.push(zip.files[name])
if (target.dir) {
isExistDir = true
continue
}
}
if (isExistDir) {
that.$message.warning(
'压缩包内仅包含图片文件，不得有其他文件或文件夹'
)
that.dialogVisible = false
return
} else {
const length = Object.keys(zip.files).length
if (
length === 72 ||
length === 120 ||
length === 360 ||
length === 200 ||
length === 648
) {
console.log('开始校验promise', new Date())
const promises = []
for (let i = 0; i < length; i++) {
var name = that.filenameArray[i].name
promises.push(
new Promise((resolve, reject) => {
// 解压图片并转换为base64
zip
.file(name)
.async('base64')
.then(base64 => {
const img = new Image()
img.onload = e => {
const { width, height } = img
if (width !== height) {
reject('有文件尺寸错误，请上传1:1比例的图片')
that.dialogVisible = false
return
} else {
resolve(img)
}
}
img.onerror = e => {
reject('有文件读取失败，请检查该文件是否正常')
that.dialogVisible = false
}
img.src = `data:image/png;base64,${base64}`
})
})
)
}
Promise.all(promises)
.then(list => {
console.log('promise结束', new Date())
var istrueState = false
for (let index = 0; index < list.length; index++) {
that.saveResolute = {
width: list[0].width,
height: list[0].height
}
if (
list[index].width < 1500 ||
list[index].width > 3000 ||
list[index].height < 1500 ||
list[index].height > 3000
) {
istrueState = true
continue
}
}
if (istrueState) {
messageup({
type: 'warning',
showClose: false,
message: '分辨率要求在1500~3000之间'
})
that.dialogVisible = false
return
}
// console.log('length', length)
// console.log(that.isAllWidthHeightnum(list))
if (that.isAllWidthHeight(list) === true) {
if (length === 72) {
that.saveType = that.typeList.find(item => {
return item.name === '360'
})
that.savexMax = 72
that.saveyMax = 1
that.threeSixzero(zip, length, '360')
} else if (length === 120) {
that.saveType = that.typeList.find(item => {
return item.name === '540'
})
that.savexMax = 20
that.saveyMax = 5
that.fiveFourzero(zip, length, '540')
} else if (length === 360) {
that.saveType = that.typeList.find(item => {
return item.name === '540 Pro'
})
that.savexMax = 36
that.saveyMax = 9
that.fiveFourzeropro(zip, length, '540Pro')
} else if (length === 200) {
that.saveType = that.typeList.find(item => {
return item.name === '720'
})
that.savexMax = 20
that.saveyMax = 5
that.sevenTwozero(zip, length, '720')
} else if (length === 648) {
that.saveType = that.typeList.find(item => {
return item.name === '720 Pro'
})
that.savexMax = 36
that.saveyMax = 9
that.sevenTwozeropro(zip, length, '720Pro')
}
} else {
that.$message.warning('素材图片分辨率不一致')
that.dialogVisible = false
return
}
})
.catch(msg => {
messageup({
type: 'warning',
showClose: false,
message: msg
})
})
} else {
that.$message.warning(
'压缩包内图片数量错误，请校对各个模式(360,540,540 Pro,720,720 Pro)下的数量规则'
)
that.dialogVisible = false
return
}
}
})
},
// 360判断 72
threeSixzero(zip, length, typeName) {
const that = this
var isNametrue = false
that.savetargetName = []
for (const name in zip.files) {
const target = zip.files[name]
that.savetargetName.push(target.name)
if (target.name.split('.')[0] === '00') {
isNametrue = true
continue
}
if (parseInt(target.name.split('.')[0]) > 72) {
isNametrue = true
continue
}
if (!/^([0-9][0-9]).(jpg)$/.test(target.name)) {
isNametrue = true
continue
}
}
if (isNametrue) {
messageup({
type: 'warning',
showClose: false,
message: '文件名格式不正确'
})
that.dialogVisible = false
return
} else {
that.uploadZip(that.saveFile, length, typeName)
}
},
// 540判断 120
fiveFourzero(zip, length, typeName) {
const that = this
var isNametrue = false
that.savetargetName = []
for (const name in zip.files) {
const target = zip.files[name]
const first_num = target.name.split('.')[0].split('-')[0]
const second_num = target.name.split('.')[0].split('-')[1]
const imgType = target.name.split('.')[1]
that.savetargetName.push(target.name)
if (!/^([0][0-5])$/.test(first_num)) {
isNametrue = true
continue
}
if (!/^([0-2][0-9])$/.test(second_num)) {
isNametrue = true
continue
}
if (parseInt(second_num) === 0) {
isNametrue = true
continue
}
if (parseInt(second_num) > 20) {
isNametrue = true
continue
}
if (imgType !== 'jpg') {
isNametrue = true
continue
}
}
if (isNametrue) {
messageup({
type: 'warning',
showClose: false,
message: '文件名格式不正确'
})
that.dialogVisible = false
return
}
that.uploadZip(that.saveFile, length, typeName)
},
// 540pro判断 360
fiveFourzeropro(zip, length, typeName) {
const that = this
var isNametrue = false
that.savetargetName = []
for (const name in zip.files) {
const target = zip.files[name]
that.savetargetName.push(target.name)
const first_num = target.name.split('.')[0].split('-')[0]
const second_num = target.name.split('.')[0].split('-')[1]
const imgType = target.name.split('.')[1]
if (!/^([0][0-9])$/.test(first_num)) {
isNametrue = true
continue
}
if (!/^([0-3][0-9])$/.test(second_num)) {
isNametrue = true
continue
}
if (parseInt(second_num) === 0) {
isNametrue = true
continue
}
if (parseInt(second_num) > 36) {
isNametrue = true
continue
}
if (imgType !== 'jpg') {
isNametrue = true
continue
}
}
if (isNametrue) {
messageup({
type: 'warning',
showClose: false,
message: '文件名格式不正确'
})
that.dialogVisible = false
return
}
that.uploadZip(that.saveFile, length, typeName)
},
// 720判断 200
sevenTwozero(zip, length, typeName) {
const that = this
var isNametrue = false
var Narray = []
var Sarray = []
that.savetargetName = []
for (const name in zip.files) {
const target = zip.files[name]
that.savetargetName.push(target.name)
const NS = target.name.split('.')[0].split('-')[0]
if (NS === 'N') {
Narray.push(NS)
}
if (NS === 'S') {
Sarray.push(NS)
}
if (NS !== 'N' && NS !== 'S') {
isNametrue = true
continue
}
const first_num = target.name.split('.')[0].split('-')[1]
const second_num = target.name.split('.')[0].split('-')[2]
const imgType = target.name.split('.')[1]
if (!/^([0][1-5])$/.test(first_num)) {
isNametrue = true
continue
}
if (!/^([0-2][0-9])$/.test(second_num)) {
isNametrue = true
continue
}
if (parseInt(second_num) === 0) {
isNametrue = true
continue
}
if (parseInt(second_num) > 20) {
isNametrue = true
continue
}
if (imgType !== 'jpg') {
isNametrue = true
continue
}
}
if (isNametrue) {
messageup({
type: 'warning',
showClose: false,
message: '文件名格式不正确'
})
that.dialogVisible = false
return
}
if (Narray.length !== 100 || Sarray.length !== 100) {
messageup({
type: 'warning',
showClose: false,
message: '文件名格式不正确'
})
that.dialogVisible = false
return
}
that.uploadZip(that.saveFile, length, typeName)
},
// 720pro判断 648
sevenTwozeropro(zip, length, typeName) {
const that = this
var isNametrue = false
var Narray = []
var Sarray = []
that.savetargetName = []
for (const name in zip.files) {
const target = zip.files[name]
that.savetargetName.push(target.name)
const NS = target.name.split('.')[0].split('-')[0]
if (NS === 'N') {
Narray.push(NS)
}
if (NS === 'S') {
Sarray.push(NS)
}
if (NS !== 'N' && NS !== 'S') {
isNametrue = true
continue
}
const first_num = target.name.split('.')[0].split('-')[1]
const second_num = target.name.split('.')[0].split('-')[2]
const imgType = target.name.split('.')[1]
if (!/^([0][1-9])$/.test(first_num)) {
isNametrue = true
continue
}
if (!/^([0-3][0-9])$/.test(second_num)) {
isNametrue = true
continue
}
if (parseInt(second_num) === 0) {
isNametrue = true
continue
}
if (parseInt(second_num) > 36) {
isNametrue = true
continue
}
if (imgType !== 'jpg') {
isNametrue = true
continue
}
}
if (isNametrue) {
messageup({
type: 'warning',
showClose: false,
message: '文件名格式不正确'
})
that.dialogVisible = false
return
}
if (Narray.length !== 324 || Sarray.length !== 324) {
messageup({
type: 'warning',
showClose: false,
message: '文件名格式不正确'
})
that.dialogVisible = false
return
}
that.uploadZip(that.saveFile, length, typeName)
},
uploadZip(file, length, typeName) {
const that = this
that.saveFolder = getDate() + '_' + typeName
that.zippercent = 0
that.$newalioss
.upload({
file,
// folder: 'zipmoviebooktest-decompression',
// folder: 'srczipmoviebooktest',
folder: that.saveFolder,
progress: percent => {
percent = ~~(percent * 100)
that.num = (percent - that.zippercent) * (file.size / 1024) * 0.01
that.zippercent = percent === 100 ? 99 : percent
}
})
.then(({ relative, absolute }) => {
// console.log(relative)
console.log(absolute)
that.saveZipurl = absolute
console.log('得到zip包地址开始交互', new Date())
that._materialAdd(Number(length))
// 调取一个接口this.zippercent = 100
})
.catch(msg => {
that.zippercent = -1
})
.finally(e => {})
},
_materialAdd(length) {
const that = this
// console.log(that.savetargetName)
// https://media-manual.oss-cn-beijing.aliyuncs.com/oss/model/unzip/2022627211258_540/00-01.jpg
const img_urlarr = that.savetargetName
const img_urlobj = {}
img_urlarr.forEach(item => {
img_urlobj[item.substring(0, item.lastIndexOf('.'))] =
'https://media-manual.oss-cn-beijing.aliyuncs.com/oss/model/unzip/' +
that.saveFolder +
'/' +
item
})
const params = {
name: that.zipname,
type: that.saveType.id,
zip_url: that.saveZipurl,
img_url: img_urlobj,
xMax: that.savexMax,
yMax: that.saveyMax,
poster: '',
poster_url: '',
resolute: that.saveResolute
}
if (length === 72) {
params.poster = '01'
params.poster_url =
'https://media-manual.oss-cn-beijing.aliyuncs.com/oss/model/unzip/' +
that.saveFolder +
'/01.jpg'
} else if (length === 120) {
params.poster = '00-01'
params.poster_url =
'https://media-manual.oss-cn-beijing.aliyuncs.com/oss/model/unzip/' +
that.saveFolder +
'/00-01.jpg'
} else if (length === 360) {
params.poster = '00-01'
params.poster_url =
'https://media-manual.oss-cn-beijing.aliyuncs.com/oss/model/unzip/' +
that.saveFolder +
'/00-01.jpg'
} else if (length === 200) {
params.poster = 'N-01-01'
params.poster_url =
'https://media-manual.oss-cn-beijing.aliyuncs.com/oss/model/unzip/' +
that.saveFolder +
'/N-01-01.jpg'
} else if (length === 648) {
params.poster = 'N-01-01'
params.poster_url =
'https://media-manual.oss-cn-beijing.aliyuncs.com/oss/model/unzip/' +
that.saveFolder +
'/N-01-01.jpg'
}
materialAdd(params).then(res => {
if (res.status === 200) {
that.zippercent = 100
console.log('zip包地址接口上传成功等待解压', new Date())
} else {
that.$message.error(res.msg)
that.zippercent = -1
}
})
},
closeDialog() {
if (this.zippercent === -2 || this.zippercent === -1) {
return
}
if (
navigator.userAgent.indexOf('Firefox') !== -1 ||
navigator.userAgent.indexOf('Chrome') !== -1
) {
window.location.href = 'about:blank'
window.close()
} else {
window.opener = null
window.open('', '_self')
window.close()
}
}
}
}
</script>
<style lang="scss" scoped>
.content {
width: 100vw;
height: 100vh;
min-height: 500px;
display: flex;
.uploadbox {
margin: 15vh auto 0;
}
}
.el-upload__tip {
text-align: center;
padding-top: 10px;
}
.redtext {
font-weight: 400;
font-size: 12px;
color: rgb(255, 56, 56);
margin-top: 10px;
margin-left: 50px;
}
.namebox {
margin-left: 50px;
display: flex;
margin-top: 30px;
padding-bottom: 50px;
.left {
width: 250px;
color: rgba(0, 0, 0, 0.4);
font-size: 14px;
margin-right: 20px;
}
.right {
font-size: 14px;
color: rgb(29, 30, 31);
}
}
.el-icon-loading {
color: rgb(0, 168, 112);
}
.el-icon-success {
color: rgb(0, 168, 112);
}
.el-icon-warning {
color: rgb(227, 77, 89);
}
.ml10 {
margin-left: 10px;
}
</style>
不求大富大贵，但求一生平凡
