index.vue
1.81 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<template>
<!-- 公用卡片 -->
<view class="upPicCont">
<view class="title">{{title}}</view>
<uni-file-picker
v-model="cargoPicture"
fileMediatype="image"
mode="grid"
limit="3"
@select="select" ></uni-file-picker>
</view>
<!-- end -->
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import {
upload
} from '@/pages/api/index.js'
const cargoPicture = ref([])
const emit = defineEmits(['uploadImage'])
// 获取父组件值、方法
const props = defineProps({
title:{
type: String,
default: '请拍照上传货品照片'
},
tit:{
type: String,
default: ''
}
});
// 图片上传 - 请求
async function uploadHande(e){
await upload(e).then(res => {
if (res.code === 200 && res.data) {
emit('uploadImage', {key: props.tit, value: res.data})
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none'
});
}
}).catch(err => {
uni.showToast({
title: '图片上传失败！请联系管理员',
duration: 1000,
icon: 'none'
});
});
}
// 图片上传
async function select(e){
cargoPicture.value = []
const tempFiles = e.tempFiles[0]
if (tempFiles.size < 1024 * 5 && (tempFiles.extname == 'png' || tempFiles.extname == 'jpg' || tempFiles.extname == 'jpeg' || tempFiles.extname == 'gif')) {
uploadHande(e)
} else {
uni.showToast({
title: '上传图片大小不能超过5M，格式需为jpg、png、gif',
duration: 2000,
icon: 'none'
});
}
}
onMounted(()=>{
})
</script>
<style lang="scss" scoped>
@import url(@/styles/theme.scss);
.upPicCont{
margin-bottom: 32rpx;
padding-top: 30rpx;
.title{
font-weight: 400;
font-size: var(--font-size-14);
color: var(--neutral-color-font);
margin-bottom: 32rpx;
}
.file-picker__box-content{
border:none;
background: var(--neutral-color-cancel);
}
}
</style>