增加设备保养
This commit is contained in:
245
components/upload/uploadImg.vue
Normal file
245
components/upload/uploadImg.vue
Normal file
@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<view class="uploadImgView">
|
||||
<view class="uploadTitle" v-if="name && name!=''">
|
||||
<view class="name font_bold">{{name}}</view>
|
||||
<view class="limit">{{newList.length}}/{{limit}}</view>
|
||||
</view>
|
||||
<view class="imgList">
|
||||
<view class="uploadFlex itemBox" v-for="(item,index) in newList" :key="index">
|
||||
<view class="imgItem">
|
||||
<view class="itemImg">
|
||||
<image class="img" :src="item" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="deleteBox" @click="deleteImg(index)">
|
||||
<text class="icon iconfont icon-a-shanchu21"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uploadFlex itemBox" v-for="(item,index) in uploadList" :key="index">
|
||||
<view class="imgItem">
|
||||
<view class="itemImg">
|
||||
<image class="img" :src="item.path" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="progressView">
|
||||
<view class="progressWidth" :style="'width:'+item.progress+'%'"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uploadBut itemBox" @click="upload()" v-if="newList.length<limit">
|
||||
<view class="img_but">
|
||||
<view class="icon iconfont icon-a-shangchuanzhaopian2 font35"></view>
|
||||
<view class="text font12">
|
||||
上传图片
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
newList:this.list,
|
||||
uploadList:[],
|
||||
|
||||
oss:{},
|
||||
}
|
||||
},
|
||||
props:{
|
||||
name:{
|
||||
type:[String],
|
||||
default:''
|
||||
},
|
||||
limit:{
|
||||
type:[Number,String],
|
||||
default:1
|
||||
},
|
||||
list:{
|
||||
type:[Array,Object],
|
||||
default: () => []
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
list:{
|
||||
handler(val){
|
||||
this.newList = val;
|
||||
},
|
||||
immediate:true,
|
||||
deep:true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getOss();
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
// 获取图片oss 服务地址
|
||||
getOss(){
|
||||
this.$api.getOss('/oss.sign',{dir:'mes'}).then(res=>{
|
||||
this.oss = res.data;
|
||||
}).catch(err=>{})
|
||||
},
|
||||
deleteImg(num){
|
||||
this.newList.forEach((item,index)=>{
|
||||
if(num == index){
|
||||
this.newList.splice(index,1);
|
||||
}
|
||||
})
|
||||
this.$emit('input',this.newList);
|
||||
},
|
||||
upload(){
|
||||
uni.chooseImage({
|
||||
count:9,
|
||||
success: (chooseImageRes) => {
|
||||
const tempFilePaths = chooseImageRes.tempFilePaths;
|
||||
tempFilePaths.forEach((item,index)=>{
|
||||
let num = item.length;
|
||||
let nameStr = item.toString();
|
||||
let name = Date.parse(new Date())+'/'+nameStr.substring(nameStr-8);
|
||||
let fileName = this.oss.dir+'/'+ name;
|
||||
let text = Date.parse(new Date())+'_'+index;
|
||||
|
||||
let obj = {
|
||||
path:nameStr,
|
||||
text:text,
|
||||
progress:0,
|
||||
}
|
||||
this.uploadList.push(obj)
|
||||
|
||||
this.uploadOss(item,name,fileName,text);
|
||||
})
|
||||
},
|
||||
fail:(errUpload)=> {
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
uploadOss(url,name,fileName,text){
|
||||
const uploadTask = uni.uploadFile({
|
||||
url:this.oss.host,
|
||||
header:{
|
||||
'Content-Type':'application/x-www-form-urlencoded',
|
||||
},
|
||||
filePath: url,
|
||||
name: 'file',
|
||||
formData: {
|
||||
'name':name,
|
||||
'key': fileName,
|
||||
'policy': this.oss.policy,
|
||||
'OSSAccessKeyId': this.oss.accessid,
|
||||
'success_action_status':200,
|
||||
'Signature': this.oss.signature,
|
||||
},
|
||||
success: (uploadFileRes)=>{
|
||||
this.newList.push(this.oss.host+fileName);
|
||||
this.uploadList = [];
|
||||
this.$emit('input',this.newList);
|
||||
},
|
||||
fail:(err)=>{
|
||||
uni.showModal({
|
||||
content: err.errMsg,
|
||||
showCancel: false
|
||||
});
|
||||
}
|
||||
});
|
||||
uploadTask.onProgressUpdate((res) => {
|
||||
this.uploadList.forEach((item,index)=>{
|
||||
if(item.text == text){
|
||||
item.progress = res.progress;
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.uploadTitle{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6px;
|
||||
.limit{
|
||||
color: $uni-text-color-info;
|
||||
}
|
||||
}
|
||||
.imgList{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.uploadFlex{
|
||||
display: flex;
|
||||
}
|
||||
.itemBox{
|
||||
width: 32%;
|
||||
height: 100px;
|
||||
margin-right: 2%;
|
||||
padding: 7px 0 0 0;
|
||||
box-sizing: border-box;
|
||||
.imgItem{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.itemImg{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.deleteBox{
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
z-index: 20;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: $uni-bg-color-delete;
|
||||
.icon{font-size: 14px;}
|
||||
}
|
||||
}
|
||||
}
|
||||
.itemBox:nth-child(3n){
|
||||
margin-right: 0;
|
||||
}
|
||||
.uploadBut{
|
||||
height: 93px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: $uni-bg-color-placeholder;
|
||||
border-radius: 4px;
|
||||
margin: 7px 0 0 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.img_but{
|
||||
display: flex;flex-direction: column;align-items: center;
|
||||
.icon{color: $uni-text-color-inverse;}
|
||||
.text{margin-top: 5px;}
|
||||
}
|
||||
|
||||
.progressView{
|
||||
position: absolute;bottom: 0;left: 0;z-index: 2;
|
||||
width: 100%;height: 6px;background: $uni-bg-color-placeholder;border-radius: 8px;
|
||||
.progressWidth{
|
||||
height: 6px;background: $uni-color-primary;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user