<style>
.head_pic{
width: 200px;
height: 200px;
background: #fff;
/* border: 1px solid #e1e1e1; */
border-radius: 8px;
margin: 10px auto;
overflow: hidden;
}
.head_pic img{
width: 100%;
height: 100%;
}
.upload_warp_text span{
display: block;
font-size: 14px;
line-break: 36px;
color: #666;
padding-left: 20px;
}
.upload_warp_buttonPic i{
display: inline-block;
font-size: 14px;
line-height: 26px;
color: #fff;
font-style: normal;
background: #1aad19;
border-radius: 4px;
padding: 4px 10px;
position: relative;
}
.upload_warp_buttonPic{
padding:10px 20px;
}
.upload_warp_buttonPic input{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.upload_warp_button{
position: fixed;
bottom: 86px;
left: 20px;
right: 20px;
}
.upload_warp_button button{
width: 100%;
background: #1aad19;
border: 0;
border-radius: 4px;
font-size: 18px;
line-height: 36px;
color: #fff;
}
</style>
<template>
<div>
<selector placeholder="请选择小区" v-model="demo" title="小区" :options="shequ"></selector>
<div class="upload_warp_buttonPic">
<i>选择文件</i>
<input id="upload_file" type="file" style="" accept='image/*' name="file" @change="fileChange($event)"/>
</div>
<div class="upload_warp_text">
<span>选中{{imgList.length}}张文件，共{{bytesToSize(this.size)}}</span>
</div>
<div class="head_pic">
<div class="upload_warp">
<div class="upload_warp_img">
<div class="upload_warp_img_div" v-for="(item,index) in imgList" :key="index">
<!-- <div class="upload_warp_img_div_top">
<img src="" class="upload_warp_img_div_del" @click="fileDel(index)">
</div> -->
<img :src="item.file.src" style="display: inline-block;">
</div>
<!-- <div class="upload_warp_left" id="upload_warp_left" @click="fileClick()" v-if="this.imgList.length < 6">
<img src="../assets/upload.png">
<img src="" class="imgs"/>
</div> -->
</div>
</div>
</div>
<div class="upload_warp_button">
<x-button style="margin-top:10px;" type="primary" action-type="button" @click.native="commit">保存</x-button>
<!-- <button @click="commit()">确认</button> -->
</div>
<div class="image-item space" @click="showActionSheet()">
<div class="image-up"></div>
</div>
</div>
</template>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script type="text/ecmascript-6">
import {
Box,
Toast
} from 'vux'
export default {
name: "cameras-and-albums",
data(){
return{
imgList: [],
datas: new FormData(),
files:0,
demo:0,
file:'',
shequ:[],
download:[],
size:0
}
},
mounted: function() {
this.$api.getcomm_list().then((res) => {
console.log(res)
let data = res.data
this.shequ = data
})
},
methods:{
onHide() {
this.$router.push({
name: 'HomeIndex'
})
},
//调用相册&相机
fileClick() {
$('#upload_file').click();
},
//调用手机摄像头并拍照
getImage() {
let cmr = plus.camera.getCamera();
cmr.captureImage(function(p) {
plus.io.resolveLocalFileSystemURL(p, function(entry) {
compressImage(entry.toLocalURL(),entry.name);
}, function(e) {
plus.nativeUI.toast("读取拍照文件错误：" + e.message);
});
}, function(e) {
}, {
filter: 'image'
});
},
//从相册选择照片
galleryImgs() {
plus.gallery.pick(function(e) {
let name = e.substr(e.lastIndexOf('/') + 1);
compressImage(e,name);
}, function(e) {
}, {
filter: "image"
});
},
//点击事件，弹出选择摄像头和相册的选项
showActionSheet() {
let bts = [{
title: "拍照"
}, {
title: "从相册选择"
}];
plus.nativeUI.actionSheet({
cancel: "取消",
buttons: bts
},
function(e) {
if (e.index == 1) {
this.getImage();
} else if (e.index == 2) {
this.galleryImgs();
}
}
);
},
fileChange(el) {
this.files= document.getElementById("upload_file").files;
console.log(this.files);
for(let i=0;i<this.files.length;i++){
this.datas.append("file",this.files[i]);
}
this.show1=false;
console.log(typeof this.files);
console.log(this.files);
if (!el.target.files[0].size) return;
this.fileList(el.target);
el.target.value = ''
},
fileList(fileList) {
let files = fileList.files;
for (let i = 0; i < files.length; i++) {
//判断是否为文件夹
if (files[i].type != '') {
this.fileAdd(files[i]);
} else {
//文件夹处理
this.folders(fileList.items[i]);
}
}
},
//文件夹处理
folders(files) {
let _this = this;
//判断是否为原生file
if (files.kind) {
files = files.webkitGetAsEntry();
}
files.createReader().readEntries(function (file) {
for (let i = 0; i < file.length; i++) {
if (file[i].isFile) {
_this.foldersAdd(file[i]);
} else {
_this.folders(file[i]);
}
}
})
},
fileAdd(file) {
let _this = this;
//总大小
this.size = this.size + file.size;
//判断是否为图片文件
if (file.type.indexOf('image') == -1) {
file.src = 'wenjian.png';
this.imgList.push({
file
});
this.file=file
} else {
let reader = new FileReader();
reader.vue = this;
reader.readAsDataURL(file);
reader.onload = function () {
file.src = this.result;
this.vue.imgList.push({
file
});
}
}
//图片转为base64编码
this.file=file
console.log('11111',this.file)
var reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function (e) {
var imgcode = reader.result
// console.log('111111',imgcode)
_this.download.push(imgcode)
}
},
//普通文件上传
addFile: function() {
var storage = window.sessionStorage
var str = storage.getItem("user");
console.log(str)
var user = JSON.parse( str );
var _this = this;
let inputDOM = this.$refs.inputer;
// let oldLen = this.filLen;
this.file = inputDOM.files[0];
let len = this.file.length;
let size = Math.floor(this.file.size / 1024);
if (size > 20 * 1024 * 1024) {
alert("请选择20M以内的图片！");
return false;
}
console.log('11111111',this.file)
let files=this.file
this.path=files.path
console.log('11111111',this.path)
_this.datas.append('file',this.file)
// this.fileList(files);
},
//提交
commit() {
var storage = window.sessionStorage
var str = storage.getItem("user");
console.log(str)
var user = JSON.parse( str );
let imgcode = this.download
console.log(imgcode)
let that = this
if(this.demo===0){
alert('请选择小区')
return false
}
this.$api.fase_wxupload(imgcode,user,this.demo).then((res) => {
if(imgcode){
alert('上传成功')
}
var data = res.data
if (data['status'] === 1) {
that.show2 = true
} else if (data['status' === 2]) {
that.content = '上传失败，请重试或联系网站管理员！'
that.show2 = true
} else if (data['status'] === 99) {
that.title = '抱歉'
that.content = '请先登陆再操作！'
that.show2 = true
}
})
},
fileDel(index) {
this.size = this.size - this.imgList[index].file.size;//总大小
this.imgList.splice(index, 1);
},
bytesToSize(bytes) {
if (bytes === 0){
return '0 B';
}
let k = 1000, // or 1024
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
i = Math.floor(Math.log(bytes) / Math.log(k));
return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
},
dragenter(el) {
el.stopPropagation();
el.preventDefault();
},
dragover(el) {
el.stopPropagation();
el.preventDefault();
},
drop(el) {
el.stopPropagation();
el.preventDefault();
this.fileList(el.dataTransfer);
},
shows(et,tx){
this.strut=et;
this.txt=tx;
},
handleClick(){
this.$store.commit('add')
},
},
}
</script>
