<template>
<view>
<view style="display: flex;">
<view class="form-left">
照片
</view>
<view style="margin-left: 6px;">
<view style="display: flex;">
<view v-for="(pic,index) in fileList" :key="index">
<image :src="pic.uri" @click="imgPreview(pic)" class="upLoadImg"></image>
</view>
<image v-if="fileList.length < 3" src="../../static/images/bglogo.png" style="width: 36px;height: 36px;margin: 13px 16px;" @click="selectPics">
</image>
</view>
</view>
</view>
<view style="padding: 20rpx; display: flex;justify-content: space-around;">
<view class="submit-button" @click="submit()">
提交
</view>
<view class="cancel-button" @click="cancel">
取消
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
show: false,
formData: {
description: ''
},
fileList: [],
srcs: [],
execId: 0,
taskId: '',
hasDescription: false,
fileUri:'',
imageStyles:{
width:64,
height:64,
border:{
color:"#888888",
width:2,
style:'dashed',
radius:'2px'
}
},
}
},
onLoad(e) {
var that = this
that.execId = e.execId;
that.taskId = e.taskId;
},
methods: {
selectPics(){
var that = this;
uni.chooseImage({
count: 3,
success: (res) => {
const files = res.tempFiles;
let imgArr = [];
for (let i = 0; i < files.length; i++) {
let obj = new Object();
obj.name = 'photo'+i;
obj.uri = files[i].path;
this.fileUri = files[i].path;
that.fileList.push(obj);
}
if(this.fileList.length > 0){
uni.uploadFile({
url: url+'/api/blade-resource/oss/endpoint/put-file-attach', (主要是这个url是你的后端映射处理得的地址,后面加上接口)
filePath: this.fileUri,
header:{
'Blade-Auth': 'bearer' + ' ' + uni.getStorageSync('token').content
},
name: 'file',
fileType: "image",
success: (res) => {
var str = JSON.parse(res.data);
// console.log(str.data.link);
uni.showToast({
title: '上传成功'
});
},
fail(res){
console.log(res)
uni.showToast({
title: '上传失败'
});
}
})
}
}
})
},
close() {
this.show = false
},
cancel(){
this.formData.description = '';
this.fileList = [];
this.show = false
},
// 图片预览
imgPreview(img){
if(img.src == null || img.src == '' || img.src == undefined){
this.srcs.push(img.uri)
}else{
this.srcs.push(img.src)
}
uni.previewImage({
indicator:"number",
loop:true,
urls: this.srcs
})
this.srcs = []
},
}
}
</script>
<style>
.form-left{
margin-left: 16px;
padding:18px 0;
}
.form-right{
margin-top: 6px;
margin-left: 6px;
padding:18px 0;
width: 90%;
border: 1px solid #D8D8D8;
border-radius: 3px;
}
.submit-button{
background-color: #3c9cff;
width: 106px;
height: 36px;
border-radius: 16px;
text-align: center;
line-height: 36px;
}
.cancel-button{
background-color: #D8D8D8;
width: 106px;
height: 36px;
border-radius: 16px;
text-align: center;
line-height: 36px;
}
.upLoadImg{
width: 96rpx;
height: 96rpx;
background-color: #FFFFFF;
margin-top: 16rpx;
margin-left: 6px;
}
</style>