**
一、限制个数为1:选择图片后先上传,后回显,具有删除功能
**
1.wxml
<van-uploader file-list="{{ fileList }}" max-count="1" bind:after-read="afterRead" bind:delete="delete"
/>
2.js
data: {
fileList: [], //需要上传图片的列表
},
afterRead(event) {
const { file } = event.detail;
console.log(event.detail);
// 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
let that=this;
wx.uploadFile({
url:getApp().data.SERVER_URLx+"/api/post/upload/logo",
method:'POST',
header: {"Authorization":"Bearer "+app.globalData.token},
filePath: file.url,
name: 'file',
formData: { user: 'test' },
success(res) {
console.log(res);
var result=JSON.parse(res.data);
// 上传完成需要更新 fileList
const { fileList = [] } = that.data;
fileList.push({ ...file, url: result.data });
that.setData({ fileList });
that.setData({ companyLogo:result.data });
console.log(fileList);
console.log(that.data.companyLogo);
},
});
},
delete(event){
console.log(event);
let that=this;
wx.request({
url:getApp().data.SERVER_URLx+"/api/post/upload/logo",
method:'DELETE',
header: {
//不加,无法传递参数至后台
'content-type':'application/x-www-form-urlencoded',
"Authorization":"Bearer "+app.globalData.token
},
data:{
path:this.data.companyLogo
},
success:function(res){
console.log(res);
if(res.data.status==200&&res.data.data.isDelete){
const { fileList = [] } = that.data;
fileList.splice(event.detail.index, 1)
that.setData({ fileList });
Toast('删除logo成功');
}else{
Toast('删除当前logo失败');
}
}
})
},
3.效果
二、多图片:先选择图片,再回显,再用户确定后上传至服务器。
wx.uploadFile只支持单图片上传
1.wxml
<view>
<van-uploader
file-list="{{ fileList }}"
multiple="true"
bind:after-read="afterRead"
max-count="6"
bind:delete="deleteImage"
/>
<!-- <van-button type="primary" bind:click="submitImage" block>提交图片</van-button> -->
</view>
2.js
//new
submitImage(e){
const { rentImgIdList = [] } = this.data;
const { fileList = [] } = this.data;
//const { fileUrlList = [] } = this.data;
//filePath是String类型只能单个上传url
let that=this;
fileList.forEach(function(e){
// var url=e.url;
// fileUrlList.push(url);
wx.uploadFile({
url:app.data.SERVER_URLx+"/api/rent/upload/img",
method:'POST',
filePath: e.url,
name: 'files',
header: {"Authorization":"Bearer "+app.globalData.token},
formData: { user: 'test' },
success(res) {
console.log(res.data);
var result=JSON.parse(res.data);
if( result.status==200){
console.log( result.data[0].rentImgId+"成功上传:"+ result.data[0].imgAddr);
rentImgIdList.push(result.data[0].rentImgId);
}else{
console.log(result.status+"上传失败:"+ result.msg);
}
}
,fail(res){
console.log("上传fail");
},complete(res){
console.log("上传complete");
}
});
});
that.setData({
rentImgIdList:rentImgIdList
});
console.log("submit image");
console.log("submit image finish");
},
deleteImage(event){
console.log(event);
let that=this;
const { fileList = [] } = that.data;
fileList.splice(event.detail.index, 1)
that.setData({ fileList });
},
afterRead(event) {
console.log(event.detail);
const { file } = event.detail;
// 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
// 上传完成需要更新 fileList
const { fileList = [] } = this.data;
console.log(file);
file.forEach(function(e){
fileList.push({ ...file,url:e.url });
});
this.setData({ fileList});
console.log(this.data.fileList);
},
转载:https://blog.csdn.net/weixin_42477252/article/details/112679355