图片上传后返回的参数,正常情况下里面的data值用JSON.parse解析一下就可以拿来用,但这次我遇到报错
返回的参数看起来没什么问题,然而放这上面一看,发现多了点东西
下面为解决问题的正确写法
wx.chooseMedia是最新的图片选取写法
//添加图片
addimg(){
wx.chooseMedia({
count:9, // 选取数量
mediaType:['image'],
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
success(r) {
const tempFilePaths = r.tempFiles;
tempFilePaths.map(item =>{
wx.uploadFile({
url:app.baseUrl + '/api/common/upload',
filePath: item.tempFilePath,
name: 'file',
formData: {
'user': 'test'
},
success(res){
if(res.statusCode==200){
//解决问题
let content = res.data;
if (content[0] != "{") {
content = content.substring(1)
}
let aa = JSON.parse(content);
console.log(aa)
}else{
wx.showToast({
title:'图片上传失败',
icon:'none'
})
}
},
fail(res){
wx.showToast({
title:'图片上传失败',
icon:'none'
})
}
})
})
}
})
},
视频选取上传
<view class="checkRight">
<view class="addImg">
<view class="stepsEachImg" wx:if="{{houseVideo}}">
<video
src="{{houseVideo.fullurl}}"
show-center-play-btn
enable-progress-gesture
enable-play-gesture
style="width: 100%;height: 100%;"
></video>
<image src="/assets/delete.png" bindtap="deleteVideo" class="delete"></image>
</view>
<view class="stepsEachImg" wx:if="{{videoCover && !houseVideo}}">
<view>
<progress percent="{{schedule}}" style="width: 180rpx;margin-bottom: 30rpx;" border-radius="4" stroke-width="8" active active-mode="forwards" backgroundColor="#ffffff" activeColor="#09BB07" />
<view class="addname" style="color: #333;font-size: 30rpx;">上传中...</view>
</view>
</view>
<view class="add" bindtap="choseeVideo" wx:if="{{!houseVideo && !videoCover}}">
<view>
<image src="/assets/addimg.png" class="addimg"></image>
<view class="addname">上传视频</view>
</view>
</view>
</view>
</view>
data:{
houseVideo:'',//房屋视频
videoCover:'',//视频上传时显示进度条
schedule:0,//进度条进度
}
//上传视频
choseeVideo(){
const that = this;
wx.chooseMedia({
count:1, // 选取数量
mediaType:['video'],
sourceType:['album'],//只从相册里选
success(r) {
const tempFilePaths = r.tempFiles[0];
that.setData({
videoCover:tempFilePaths
})
const uploadTask = wx.uploadFile({
url:app.baseUrl + '/api/common/upload',
filePath: tempFilePaths.tempFilePath,
name: 'file',
formData: {
'user': 'test'
},
header:{
token:wx.getStorageSync('token')
},
success(res){
//进度条百分百
that.setData({
schedule:100
})
if(res.statusCode==200){
//解决问题
let content = res.data;
if (content[0] != "{") {
content = content.substring(1)
}
let aa = JSON.parse(content);
//code码根据自己的来确定
if(aa.code == 1){
that.setData({
houseVideo:aa.data
})
}else{
that.deleteVideo()
wx.showToast({
title:'上传失败,请重试',
icon:'error'
})
}
}else{
that.deleteVideo()
wx.showToast({
title:'上传失败,请重试',
icon:'error'
})
}
},
fail(res){
wx.showToast({
title:'视频上传失败',
icon:'none'
})
}
})
//监听视频上传,但不太准确
uploadTask.onProgressUpdate(res =>{
if(res.progress > 80){
uploadTask.offProgressUpdate();//终止监听
return
}
//进度条数值
that.setData({
schedule:res.progress
})
})
}
})
},
//删除视频
deleteVideo(){
this.setData({
houseVideo:'',//房屋视频
videoCover:'',//视频上传时显示进度条
schedule:46,//进度条进度
})
},
.checkRight{
width:100%;
display: flex;
align-items: center;
flex-wrap: wrap;
font-size: 32rpx;
}
.addImg{
width: 100%;
display: flex;
align-items: center;
margin-top: 30rpx;
flex-wrap: wrap;
}
.add{
width: 200rpx;
height: 200rpx;
border-radius: 10rpx;
background-color: #eee;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
margin-right: 30rpx;
margin-bottom: 20rpx;
}
.addimg{
width: 80rpx;
height: 80rpx;
}
.addname{
font-size: 28rpx;
color: #909090;
}
.stepsEachImg{
width: 200rpx;
height: 200rpx;
border-radius: 10rpx;
background-color: #eee;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
margin-right: 30rpx;
margin-bottom: 20rpx;
position: relative;
}
.stepsImg{
width: 100%;
height: 100%;
border-radius: 10rpx;
}
.delete{
position: absolute;
top: -10rpx;
right: -10rpx;
width: 40rpx;
height: 40rpx;
}