上传图片
PS 上传图片的接口里面的参数并不是真正的参数(长话短说,这个是数组)
在登录的时候一般一般要拿到token
token的话要在请求头上展示,然后每次在登录时 拿到这个token才可以请求访问。
上传预览删除效果
这个不带请求参数,只是单独实现以上效果的功能
效果图
代码
wxml
<view class="content">
<view class='ui_uploader_cell'>
<view class='ui_uploader_item' wx:for="{{uploaderList}}" wx:key="{{index}}">
<icon class='ui_uploader_item_icon' bindtap='clearImg' data-index="{{index}}"
type="clear" size="20" color="gray" />
<image class="ui_image" bindtap='showImg' data-index="{{index}}" src='{{item}}'>
</image>
</view>
<view class='onload' bindtap='upload' wx:if="{{showUpload}}"></view>
</view> <!-- 上传图片 -->
</view>
wxss
.content{
padding: 0 20px;
width: 90%;
line-height: 50px;
height: 50px;
display: flex;
margin-bottom: 10px;
background: fixed;
background: white;
justify-content: space-between;
}
.content-img{
width: 30px;
height: 30px;
margin-top: 6px;
vertical-align: middle;
}
.content--text{
color: gray;
vertical-align: middle;
}
.onload {
margin-top: 10px;
float: left;
position: relative;
margin-right: 25px;
margin-bottom: 25px;
width: 60px;
border-radius: 50%;
height: 60px;
border: 1px dashed #96DC74;
box-sizing: border-box;
}
.onload::before {
content: " ";
position: absolute;
width: 2px;
height: 35px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #96DC74;
}
.onload::after {
content: " ";
position: absolute;
height: 2px;
width: 35px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #96DC74;
}
.ui_image {
margin-top: 10px;
float: left;
position: relative;
margin-right: 25px;
margin-bottom: 25px;
width: 60px;
border-radius: 50%;
height: 60px;
box-sizing: border-box;
}
.ui_uploader_item_icon {
position: absolute;
right: 21px;
top: 3px;
background: #fff;
border-radius: 50%;
}
.ui_uploader_item {
float: left;
position: relative;
margin-right: 30rpx;
margin-bottom: 30rpx;
width: 165rpx;
height: 165rpx;
}
js
Page({
data: {
// 上传图片数据
uploaderList: [],
uploaderNum: 0,
showUpload: true,
},
// 删除图片
clearImg: function (e) {
var nowList = []; //新数据
var uploaderList = this.data.uploaderList; //原数据
for (let i = 0; i < uploaderList.length; i++) {
if (i == e.currentTarget.dataset.index) {
continue;
} else {
nowList.push(uploaderList[i])
}
}
this.setData({
uploaderNum: this.data.uploaderNum - 1,
uploaderList: nowList,
showUpload: true
})
},
//展示图片
showImg: function (e) {
var that = this;
wx.previewImage({
urls: that.data.uploaderList,
current: that.data.uploaderList[e.currentTarget.dataset.index]
})
},
//上传图片
upload: function (e) {
var that = this;
wx.chooseImage({
//默认为1的直接把num值变就可以了
count: 9 - that.data.uploaderNum, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
console.log(res)
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
let tempFilePaths = res.tempFilePaths;
let uploaderList = that.data.uploaderList.concat(tempFilePaths);
if (uploaderList.length == 9) {
that.setData({
showUpload: false
})
}
that.setData({
uploaderList: uploaderList,
uploaderNum: uploaderList.length,
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
带后台接口效果
就是请求时上传的图片会传到数据库与接口显示
参考链接
同上所述,就是在上传的时候更改下代码
//上传图片
upload: function (e) {
var that = this;
wx.chooseImage({
count: 9 - that.data.uploaderNum, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function ({tempFilePaths: [ filePath ]}) {
wx.uploadFile({//填上这个是上传服务器需要
url: 'http://192.168.101.16:8028/sy/file/addPic',
filePath,
name: 'file',//这个是接口属性 是个数组 不是嵌套累加的
header: {
'Authorization':'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxNTU2NTk3MTQ2NSIsImNyZWF0ZWQiOjE2MTc5NTMxNDgxNjksImV4cCI6MTYxODU1Nzk0OH0.6FQT5vMiWtFf0jLo4Wmk55GVJVLFrnBN7SP6CkElE71Tn7oRLcphpbjGaEzVaRyfxqsI5W9T67l7J0CYYSJ9_Q'
},
success: function (res) {
var data = res.data
//do something
}
})
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
let uploaderList = that.data.uploaderList.concat(filePath);
if (uploaderList.length == 1) { //这个是只能上次一张图片
that.setData({
showUpload: false
})
}
that.setData({
uploaderList: uploaderList,
uploaderNum: uploaderList.length,
})
}
})
},
上传完请求图片后,在另一个页面接收并渲染上去
AB页面互相传参接参 请访问
然后我们传完后,我们进行渲染
//然后我们进行渲染
//前面是服务器名称 后面是你定义的名称值 以'http://8000/'+图片路径
<image src="{{'http://192.168.101.16:8028/sy/file/addPic/'+addimg}}"></image>
如果返回的直接是带服务器的接口,可以直接渲染,不用拼接。
不带服务器的才要考虑上面那个拼接方式