You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
3.2 KiB
134 lines
3.2 KiB
3 years ago
|
<template>
|
||
|
|
<view class="upload">
|
||
|
|
<view class="list">
|
||
|
|
<view class="item interval" v-for="(item,index) in fileList" :key="index">
|
||
|
|
<image :src="item" v-if="item"></image>
|
||
|
|
<view class="icon-close" @click.stop="handleRemove(index)">
|
||
|
|
<uni-icon type="closeempty" size="20" color="#fff"></uni-icon>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="item" @click="chooseImage" v-if="fileList.length<limit">
|
||
|
|
<uni-icon type="image" size="30" color="#cccccd"></uni-icon>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
limit: {
|
||
|
|
type: Number,
|
||
|
|
default: 5
|
||
|
|
},
|
||
|
|
url: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
name: {
|
||
|
|
type: String,
|
||
|
|
default: 'file'
|
||
|
|
},
|
||
|
|
formData: {
|
||
|
|
type: Object,
|
||
|
|
default () {
|
||
|
|
return {}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
header: {
|
||
|
|
type: Object,
|
||
|
|
default () {
|
||
|
|
return {}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
fileList: {
|
||
|
|
type: Array,
|
||
|
|
default () {
|
||
|
|
return []
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
chooseImage() {
|
||
|
|
uni.chooseImage({
|
||
|
|
success: (chooseImageRes) => {
|
||
|
|
const uploadTask = uni.uploadFile({
|
||
|
|
url: 'https://www.huorantech.cn/api-guarantee/dg-apply-amount-info/uploadFile',
|
||
|
|
name: 'file',
|
||
|
|
filePath: chooseImageRes.tempFilePaths[0],
|
||
|
|
header: {
|
||
|
|
"Content-Type": "multipart/form-data",
|
||
|
|
"token":"eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiIxIiwic3ViIjoidG9rZW4iLCJpc3MiOiJBZG1pbiIsImlhdCI6MTYxMTcxMjUwNiwiZXhwIjoxNjExNzk4OTA2fQ.Hp6r0Abux__NoAp-8ssmcz4FPdiW_BRdNoXX5UDw_1w"
|
||
|
|
},
|
||
|
|
timeOut:30000,
|
||
|
|
success: (uploadFileRes) => {
|
||
|
|
console.log(uploadFileRes)
|
||
|
|
this.$emit('on-success', JSON.parse(uploadFileRes.data))
|
||
|
|
},
|
||
|
|
fail: (err) => {
|
||
|
|
this.$emit('on-error', err)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
uploadTask.onProgressUpdate((res) => {
|
||
|
|
this.$emit('on-process', res)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
handleRemove(index) {
|
||
|
|
this.$emit('on-remove', index)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.upload {
|
||
|
|
.list {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
.item {
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
width: 140rpx;
|
||
|
|
height: 140rpx;
|
||
|
|
border-radius: 8rpx;
|
||
|
|
border: 2rpx solid #D9D9D9;
|
||
|
|
background-color: #f3f3f3;
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
&.interval {
|
||
|
|
margin-right: 16rpx;
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
image {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
border-radius: 8rpx;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
.icon-close {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
width: 28rpx;
|
||
|
|
height: 28rpx;
|
||
|
|
background-color: red;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
border-radius: 0 8rpx 0 0;
|
||
|
|
}
|
||
|
|
.icon {
|
||
|
|
width: 48rpx;
|
||
|
|
height: 48rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|