uniapp中使用uni.chooseImages进行简单的图片上传，删除
使用uni.chooseImages进行简单的图片上传，删除<template><view class="feedback-wrap"><!-- 反馈类型 --><view class="feedback-type"><view class="feedback-type-title">反馈类型</view><view c
·
使用uni.chooseImages进行简单的图片上传，删除
<template>
<view class="feedback-wrap">
<!-- 反馈类型 -->
<view class="feedback-type">
<view class="feedback-type-title">反馈类型</view>
<view class="feedback-type-con">
<template v-for="(item,index) in feedbackTypeList">
<view class="feedback-type-item" :class="{'type-active':currentIndex==index?true:false}" :key="item.code" @click="feedbackTypeHandle(index)">{{item.name}}</view>
</template>
</view>
</view>
<!-- 反馈内容 -->
<view class="feedback-con">
<view class="feedback-con-title">
<text>反馈内容</text>
<text class="feedback-con-num">{{conLength}}/200</text>
</view>
<view class="feedback-con-msg">
<textarea @input="getFeedbackMessageHandle" maxlength="200" class="feedback-con-textarea" placeholder="请输入反馈内容并上传图片" placeholder-class="placeholderclass"></textarea>
</view>
</view>
<!-- 上传图片 -->
<view class="feedback-image">
<view class="feedback-image-title">
<text>上传图片</text>
</view>
<view class="feedback-image-box">
<template v-for="(item,index) in tempFileList">
<view class="feedback-image-item" :key="item.path">
<image :src="item.path" class="feedback-image-icon"></image>
<text class="iconfont feedback-image-delete" @click="deleteImgHandle(index)"></text>
</view>
</template>
<view class="feedback-image-btn" @click="chooseImageHandle">
<text class="iconfont" style="font-size: 20px;"></text>
<text style="padding-top: 6px;">添加图片</text>
</view>
</view>
</view>
<!-- 手机号码 -->
<view class="feedback-phone">
<view class="feedback-phone-title">
<text>手机号码</text>
</view>
<view class="feedback-phone-box">
<input class="feedback-phone-input" @input="getPhoneHandle" placeholder="请输入您的手机号便于我们联系您" placeholder-class="placeholderclass" />
</view>
</view>
<view class="form-btn mtop_30 mbottom_30" @click="submitHandle">提交反馈</view>
</view>
</template>
<script>
export default {
data() {
return {
currentIndex:"0",
feedbackTypeList:[{
code:"0",
name:'BUG反馈'
},{
code:"1",
name:'功能建议'
},{
code:"2",
name:'其他问题'
}],
feedbackValue:"",//反馈内容
conLength:0,
tempFileList:[],//选择图片临时存储
tempFileObject:[],//上传腾讯云返回图片路径
};
},
onLoad() {
},
watch:{
feedbackValue(newVal,oldVal){
console.log("计算属性",newVal)
this.conLength=newVal.length;
}
},
methods:{
//选择反馈类型
feedbackTypeHandle(currentIndex){
console.log("[反馈类型]",currentIndex)
this.currentIndex=currentIndex;
},
//获取返回内容
getFeedbackMessageHandle(e){
console.log("[反馈内容]",e)
this.feedbackValue=e.detail.value
},
//上传图片
chooseImageHandle(){
console.log("[上传图片]")
let that=this;
uni.chooseImage({
count: 9, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'], //从相册选择
success: function(res){
console.log(res)
let tempFiles=res.tempFiles;
tempFiles.forEach(function(item,index){
console.log(item.name)
that.tempFileList.push({
name:item.name,
path:item.path
})
})
}
})
},
//删除图片
deleteImgHandle(currentIndex){
console.log("[删除图片]")
this.tempFileList.splice(currentIndex,1)
console.log(this.tempFileList)
},
//提交反馈意见
submitHandle(){
console.log("[反馈意见]")
console.log(this.tempFileList)
}
}
}
</script>
<style lang="scss" scoped>
.feedback-wrap{
width: 91.47%;
margin: 12px auto;
display: flex;
flex-direction: column;
.feedback-type{
display: flex;
flex-direction: column;
.feedback-type-title{
font-size:15px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FEFEFE;
}
.feedback-type-con{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 10px;
.feedback-type-item{
background: #0A0E1D;
border: 1px solid #70737F;
border-radius: 18px;
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FEFEFF;
padding: 7.5px 17.5px;
margin-right: 11.5px;
margin-top: 6px;
}
.type-active{
border: 1px solid #E54848;
background: linear-gradient(0deg, #F65555 0%, #E54848 100%);
color: #FEFEFF;
}
}
}
.feedback-con{
display: flex;
flex-direction: column;
margin-top: 21.5px;
.feedback-con-title{
font-size:15px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FEFEFE;
position: relative;
.feedback-con-num{
position: absolute;
right: 0;
top: 0;
}
}
.feedback-con-msg{
min-height: 120px;
border: 1px solid #70737F;
border-radius: 8px;
margin-top: 12px;
padding: 12px 12px;
.feedback-con-textarea{
width: 100%;
font-size:14px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FEFEFE;
}
.placeholderclass{
color: #999999;
}
}
}
.feedback-image{
display: flex;
flex-direction: column;
margin-top: 21.5px;
.feedback-image-title{
font-size:15px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FEFEFE;
position: relative;
}
.feedback-image-box{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 2px;
.feedback-image-item{
border: 1px solid #70737F;
border-radius: 8px;
width: 62px;
height: 62px;
margin-right:9.5px;
margin-top: 9.5px;
display: flex;
background-color: #FFFFFF;
position: relative;
.feedback-image-icon{
border-radius: 8px;
width: 100%;
height: 100%;
display: block;
}
.feedback-image-delete{
color: #ff0000;
position: absolute;
top: -5px;
right: -5px;
}
}
.feedback-image-btn{
border: 1px solid #70737F;
border-radius: 8px;
width: 62px;
height: 62px;
margin-right:9.5px;
margin-top: 9.5px;
display: flex;
flex-direction: column;
font-size: 13px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #999999;
justify-content: center;
align-items: center;
}
}
}
.feedback-phone{
display: flex;
flex-direction: column;
margin-top: 21.5px;
.feedback-phone-title{
font-size:15px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FEFEFE;
position: relative;
}
.feedback-phone-box{
width: 100%;
display: flex;
flex-direction: row;
margin-top:8px;
.feedback-phone-input{
border-bottom: 1px solid #70737F;
width: 100%;
height: 30px;
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FEFEFE;
}
.placeholderclass{
color: #999999;
}
}
}
}
</style>
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
4
0- 0
已为社区贡献10条内容
所有评论(0)