本文使用原生的上传有局限性,ios手机能同时选择多张图片,而安卓手机只能一张一张上传,不能一次性选择多张。所以建议调用 微信JS SDK。
<template>
<div class="start-work viewport">
<div class="hd tc">
<div>
<div>张三 - 幸福花园 19#404</div>
<div>2018-08-08</div>
</div>
</div>
<!— <div>
<dl>
<dt>开工照片</dt>
<dd>
<div class="add-pic fl">
<i class="icon iconfont icon-jia"></i>
</div>
<div class="pic-item fl" v-for="(item,index) in 1" :key="index">
<img src="" alt="">
</div>
</dd>
</dl>
</div> —>
<!—收货照片—>
<dl class="receipt-pic pub-section">
<dt>
<h3>收货照片 <span>(限9张)</span></h3>
</dt>
<dd>
<div class="add-pic fl" v-if="formDatas.receive_imgs.length < 9">
<input name="files" type="file" id="file" accept="image/" multiple="multiple" @change="imgChange($event)" />
<i class="icon iconfont icon-jia"></i>
<label for="file"></label>
</div>
<div class="pic-item fl" v-for="(item,index) in formDatas.receive_imgs" :key="index">
<!—<span v-if="item === true">
<mt-spinner type="snake"></mt-spinner>
</span>—>
<img :src="item" alt="">
<span @click="deletePic(index)">
<i class="icon iconfont icon-icon-test"></i>
</span>
</div>
</dd>
</dl>
<div>
<!—允许开工—>
<div>
<div>
周末是否允许开工
</div>
<div>
<div class="j-radio l-txt" v-for="(type,index) in allowStartData" :key="index">
<label>
<span>{{type.label}}</span>
<input type="radio" name="houseType" v-model="allowStartType" :value="type.value" :checked="type.value === allowStartType ? true : false">
<span></span>
</label>
</div>
</div>
</div>
<div>
<span @click="strtWorkFn">
开工
</span>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import { Toast, Spinner} from 'mint-ui'
import Oss from '@/assets/js/util/aliyunOss.js'
Vue.component(Spinner.name, Spinner)
export default {
data () {
return {
allowStartType: '1',
allowStartData: [
{
label: '允许',
value: '1'
},
{
label: '不允许',
value: '2'
}
],
sign: {
accessid: '',
dir: '',
expire: '',
host: '',
policy: '',
signature: ''
},
formDatas: {
purchase_id: '',
receive_imgs: [],
products: [],
remark: ''
}
}
},
mounted () {
let _this = this
Oss.getSign(200).then((res) => { // 获取签名
_this.sign = res.data
console.log(_this.sign)
// console.log('this.sign', _this.sign)
}).catch((err) => {
console.log('err', err)
})
},
methods: {
apiUploadOss (ossData) {
let _this = this
// this.$http({
// url: this.sign.host,
// method: 'post',
// data: ossData,
// onUploadProgress (progressEvent) { // 原生获取上传进度的事件
// if (progressEvent.lengthComputable) {
// console.log(progressEvent)
// console.log('百分比', (progressEvent.loaded / progressEvent.total) 100)
// }
// }
// }).then(function (res) {
// _this.formDatas.receive_imgs.push(_this.sign.host + '/' + ossData.get('key'))
// console.log('路劲:', _this.sign.host + '/' + ossData.get('key'))
// }).catch(function (err) {
// console.log(err)
// })
this.$http.post(_this.sign.host, ossData).then(function (res) {
_this.formDatas.receive_imgs.push(_this.sign.host + '/' + ossData.get('key'))
console.log('路劲:', _this.sign.host + '/' + ossData.get('key'))
}).catch(function (err) {
console.log(err)
})
},
imgChange (e) {
console.log('初次点击')
let _this = this
let files = e.target.files
console.log(files)
// 验证数量
if ((this.formDatas.receive_imgs.length + files.length) > 9) {
Toast('最多只能上传9张图片')
return
}
// 验证格式
for (let i = 0; i < files.length; i++) {
if (!/.(jpg|jpeg|png)$/.test(e.target.files[i].name)) {
Toast('文件必须是jpeg,jpg,png中的一种')
return
}
// else {
// this.formDatas.receive_imgs.push(true) // 表示加载中
// }
}
for (let i = 0; i < files.length; i++) {
let file = e.target.files[i] // 获取图片资源
let filename = file.name
// 获取最终需要上传的参数
let ossData = Oss.getFormDataParams(_this.sign, filename)
// 添加文件
let reader = new FileReader()
let oImg = new Image()
let uploadInfo = {}
console.log('ossData', ossData)
reader.onload = function (e) {
uploadInfo.imageBase64 = e.target.result
let src = uploadInfo.imageBase64
// $('#thumbnail-list').append("1->:"+getSizeByBase64(uploadInfo.imageBase64))
oImg.onload = function () {
src = Oss.compress(oImg, 0.8)
// 添加最后需要的参数
ossData.append('file', Oss.convertBase64UrlToBlob(src), filename)
// 开始上传
_this.apiUploadOss(ossData)
}
oImg.src = src
return true
}
reader.readAsDataURL(file)
}
},
deletePic (index) {
this.formDatas.receive_imgs.splice(index, 1)
console.log(this.formDatas.receive_imgs)
},
strtWorkFn () {
let _this = this
let work_on_weekend = '1'
if (this.allowStartType === '1') {
work_on_weekend = true
} else if (this.allowStartType === '2') {
work_on_weekend = false
}
this.$http.post('/api/steward/projects/' + _this.$route.query.contract_id + '/start',
{contract_id: _this.$route.query.contract_id, work_on_weekend: work_on_weekend, work_images: _this.formDatas.receive_imgs}).then((res) => {
let datas = res.data
if (datas.code === 0) {
console.log(datas)
} else {
Toast({
message: datas.msg,
duration: 2000
})
}
})
}
}
}
</script>
<style scoped >
@import (reference) "~less/base.less";
.start-work{
font-size:.28rem;
.hd{
background:#fff;
padding-left:.38rem;
.inner-wrap{
padding:.5rem .38rem .2rem 0;
}
}
// 收货图片
.receipt-pic{
padding: 0.5rem 0 0 0.4rem;
border-bottom:.1rem solid @c-f5;
h3{
border-bottom:1px solid @c-border;
padding-bottom: 0.2rem;
span{
font-size:.14rem;
color: @c-999;
}
}
dd {
padding:.44rem 0 .6rem;
.add-pic {
position:relative;
border: 2px dashed @c-999;
width: 1.34rem;
height: 1.34rem;
float: left;
text-align: center;
margin-right:.2rem;
box-sizing: border-box;
.icon-jia{
font-size:.54rem;
color:@c-999;
line-height:1.32rem;
}
label{
position:absolute;
top:0;
left:0;
z-index:1;
width:100%;
height:100%;
}
input{
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
}
.pic-item {
position:relative;
width: 1.34rem;
height: 1.34rem;
margin:0 .2rem .2rem 0;
img {
width: 100%;
height: 100%;
}
.delete-pic{
position:absolute;
top:-.15rem;
right:-.15rem;
background:@c-high;
border-radius: 50%;
z-index:1;
width:.38rem;
height:.38rem;
text-align: center;
line-height:.38rem;
.tc;
}
.icon-icon-test{
font-size:.12rem;
color:#fff;
display:inline-block;
transform: scale(0.8,0.8);
}
}
}
}
.ft{
background:#fff;
padding:.4rem .38rem .88rem;
.allow-start{
.display-flex;
line-height:.4rem;
.v{
flex: 1;
.tr;
}
.j-radio:last-child{
margin-left:.4rem;
}
}
.start-btn{
margin-top:2.5rem;
}
.btn{
.btn-main(100%,1rem,.28rem, 5px);
background:@c-main;
color:#fff;
}
}
}
</style>
本文地址:https://www.zhuimengzhu.com/details/243.html
转载地址:暂无
转载说明:转载时请在文首注明来源zhuimengzhu.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。zhuimengzhu 保留追究相应责任的权利。