插件代码
<template>
<view class="uni-column">
<view class="uni-row" style="font-size: 26upx;color: rgb(70 70 70);justify-content: space-between;margin-right: 25upx;">
<view>请选择上传的图片</view>
<view v-if="max > 0">{{ value.length }}/{{ max }}</view>
<view v-else>不限</view>
</view>
<view class="uni-row" style="flex-wrap: wrap;margin-top: 20upx;">
<view v-for="v in value" style="width: 213upx;height: 213upx;background-color: #CCCCCC;margin-bottom: 20upx;margin-right: 20upx;border-radius: 10upx;border: 1px solid #CCCCCC;position: relative;">
<image :src="v" mode="scaleToFill" style="width: 213upx;height: 213upx;"></image>
<view style="position: absolute;left: -10upx;top: -10upx;width: 50upx;height: 50upx;border-radius: 10upx;background-color: #FFFFFF;">
<image src="/static/img/delimg.png" mode="scaleToFill" style="width: 50upx;height: 50upx;border-radius: 10upx;"></image>
</view>
</view>
<!-- 上传图片按钮 -->
<view class="uni-column" style="width: 213upx;height: 213upx;margin-bottom: 20upx;margin-right: 20upx;border-radius: 10upx;border: 1px solid #CCCCCC;justify-content: center;align-items: center;" @click="onUploadTo">
<image src="/static/img/upimg.png" mode="scaleToFill" style="width: 60upx;height: 60upx;"></image>
<view style="font-size: 28upx;color: rgb(70 70 70);margin-top: 10upx;">上传图片</view>
</view>
</view>
</view>
</template>
<script>
import Net from '@/libs/net.js'
export default {
model: {
prop: 'value',
event: 'change'
},
props: {
value: {
type: Array
},
max: {
type: Number,
default: -1,
}
},
data() {
return {
hasUpload: false,
}
},
methods: {
/**
* 上传图片
*/
onUploadTo() {
let _ = this
if(_.hasUpload) {
return
}
let sub = _.max - _.value.length
if(sub < 1) {
uni.showToast({
icon: "none",
title: "已达到图片数量上限",
})
return
}
uni.chooseImage({
count: _.max,
success(r) {
_.hasUpload = true
// 验证图片长度并切割
let files = r.tempFilePaths
if(files.length > sub) {
files = files.slice(0, sub)
}
Net.uploadCarApp({
files: files,
success(res) {
uni.showToast({
icon: "none",
title: "成功上传 " + res.success_num + "/" + res.total + " 张",
})
// console.log("图片张数", _.value.concat(res.data));
_.$emit('change', _.value.concat(res.data))
_.hasUpload = false
}
})
}
})
}
}
}
</script>
<style>
</style>
业务代码
<template>
<view class="container">
<CarImageInput :value="form.images" @change="onTestChange" :max="16"></CarImageInput>
<CarImageInput v-model="form.images" :max="16"></CarImageInput>
<CarImageInput v-model="form.certs" :max="6"></CarImageInput>
</view>
</template>
<script>
import Net from '@/libs/net.js'
import Model from '@/libs/model.js'
import CarImageInput from '@/components/car/car-image-input.vue'
export default {
components: {
CarImageInput,
},
data() {
return {
form: {
images: [],
certs: [],
license_at: '',
tx: '',
trade_type: '',
},
pickerOptions: {
tx: Model.getCarTxOptions(),
trade_type: Model.getCarTradeTypeOptions(),
},
pickerVisible: {
license_at: false,
tx: false,
trade_type: false,
},
};
},
methods: {
/**
* 显示选择框
* @param {Object} key
*/
onClickShowPicker(key) {
let _ = this
_.pickerVisible[key] = true
},
onTestChange(v) {
uni.showToast({
icon: "none",
title: "回调图片" + v.length
})
console.log("回调数据", v);
this.form.images = v
},
}
};
</script>
<style></style>
1 个回复
h***@163.com (作者) - 一个普通的程序猿
后来我找了一下资料在看到社区中有回答修改为
input
然后发现确实没问题,但是.sync
还不清楚什么原因