<template>
<view class="container">
<uni-card :is-shadow="false" is-full>
<text class="uni-h6">可上传商品详情(暂未完全实现)bug
不填也可以上传,多个图片只显示一个</text>
</uni-card>
<uni-section title="上传图片" type="line">
<view class="example-body">
<uni-file-picker
limit="8"
title="最多选择8张图片"
v-model="imageValue"
fileMediatype="image"
mode="grid"
@select="select"
@progress="progress"
@success="success"
@fail="fail" >
</uni-file-picker>
</view>
</uni-section>
<uni-section title="输入商品相关信息" type="line">
<uni-forms class="textinput" ref="baseForm" label-position="top">
<uni-forms-item label="商品名" required>
<uni-easyinput v-model="itemname" placeholder="请输入商品名" />
</uni-forms-item>
<uni-forms-item label="商品介绍" required>
<uni-easyinput v-model="introduction" type="textarea" placeholder="请输入商品介绍" />
</uni-forms-item>
<uni-forms-item label="商品原价" required>
<uni-easyinput v-model="oprice" placeholder="请输入商品原价(¥)" />
</uni-forms-item>
<uni-forms-item label="商品现价" required>
<uni-easyinput v-model="nprice" placeholder="请输入商品现价(¥)" />
</uni-forms-item>
</uni-forms>
</uni-section>
<button class="uploadBtn" @click="onSubmit">上传商品</button>
</view>
</template>
<script>
export default {
data() {
return {
itemname:"",
introduction:"",
oprice:"",
nprice:"",
fileUrl:[],
sourceType: ['album', 'camera'],
imageStyles: {
width: 64,
height: 64,
border: {
radius: '50%'
}
},
imageValue:[],
listStyles: {
// 是否显示边框
border: true,
// 是否显示分隔线
dividline: true,
// 线条样式
borderStyle: {
width: 1,
color: 'blue',
style: 'dashed',
radius: 2
}
},
}
},
methods: {
upload(){
this.$refs.files.upload()
},
select(e){
console.log('选择文件:',e)
},
// 获取上传进度
progress(e){
console.log('上传进度:',e)
},
// 上传成功
success(e){
console.log('上传成功')
this.fileUrl=e.tempFilePaths
console.log(this.fileUrl)
},
// 上传失败
fail(e){
console.log('上传失败:',e)
}
},
onLoad() {
// uni.hideTabBar();
}
}
</script>
<style lang="scss">
.example-body {
padding: 10px;
padding-top: 0;
}
.custom-image-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.text {
font-size: 14px;
color: #333;
}
.textinput{
width: 95%;
margin: 0 auto;
}
.uploadBtn{
width: 95%;
margin: 0 auto;
background-color: #7e0c6e;
}
</style>

- 发布:2023-12-15 18:10
- 更新:2023-12-16 11:44
- 阅读:260
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win11
HBuilderX类型: 正式
HBuilderX版本号: 3.8.12
手机系统: Android
手机系统版本号: Android 10
手机厂商: 模拟器
手机机型: 雷电模拟器
页面类型: vue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
将代码绑定服务空间后进行文件上传,上传多个地址时读取tempFilePaths只能读一个地址。
将代码绑定服务空间后进行文件上传,上传多个地址时读取tempFilePaths只能读一个地址。
预期结果:
读取tempFilePaths读取了上传图片的列表。
读取tempFilePaths读取了上传图片的列表。
实际结果:
读取tempFilePaths读取了上传图片的其中一个。
读取tempFilePaths读取了上传图片的其中一个。
DCloud_UNI_HT
问题解决了?
2023-12-19 09:59
喜欢技术的前端
回复 DCloud_UNI_HT: 可能是操作方式的问题
2023-12-19 13:39