小程序图片上传：

需求：

点击上传和删除选中图片功能

实例：

在这里插入图片描述
分析过程：

1.首先使用tt.chooseImage()选择上传的图片，获取到所选择图片的网络地址。
2.然后使用tt.uploadFile()将选择的图片上传到项目后台。
3.其次使用tt.previewImage()实现图片在页面预览的功能。
4.最后当图片在页面预览出现时自定义删除图片按钮，使data中的图片文件地址设置为’'即可。

1.HTML

<view class="container"><view class="main"><view class="title">上传图片</view><!-- 点击上传前的页面 --><view class="content" tt:if="{{!imgPreview}}" bindtap="handleUploadImg"><text class="plus">+</text></view><!-- 点击上传后的页面 --><view class="selectImg" tt:if="{{imgPreview}}"><view class="deleteBox" bindtap="deleteImg"><view class="deleteBtn">x</view></view><image class="img" src="{{imgPreview}}" bindtap="previewImg"></view></view>
</view>

2.CSS

.container {width: 100%;
}
.main {display: flex;padding: 0 16px;flex-direction: column;background-color: #fff;
}
.title {margin: 16px;
}
.content {width: 80px;height: 80px;display: flex;justify-content: center;align-items: center;margin: 16px;background-color: #eee;border: 1px dashed #ddd;border-radius: 4px;
}
.selectImg {position: relative;
}
.selectImg .img {width: 80px;height: 80px;border-radius: 4px;overflow: hidden;object-fit: contain;margin: 16px;
}
.deleteBox {position: absolute;top: 20px;left: 74px;width: 16px;height: 16px;line-height: 14px;text-align: center;border-radius: 50%;background-color: #a59f99;
}
.deleteBtn {color: #fff;
}

3.JS

Page({data: {imgPreview: ''},onLoad: function () {},// 选择并上传handleUploadImg: function() {const that = this// 从相册或相机拍摄tt.chooseImage({sourceType: ["album", "camera"], // PC端无效count: 1,//最多可选择的图片数量sizeType: ["compressed"], //图片压缩success: (res) => {console.log('res: ', res);const previewData = res.tempFilePaths[0] //得到选择图片的网络地址 http://127.0.0.1:3000/.....IMG917.jpeg// 将本地文件上传到网络tt.uploadFile({url: 'https://......./service/rest/tk.File/collection/upload', //项目的文件上传接口地址filePath: res.tempFilePaths[0], // 本地文件路径name: 'file', // HTTP请求的文件名success: (res) => {console.log('res: ', res);if(res.statusCode === 200) {that.setData({imgPreview: previewData})}}});}});},// 预览图片previewImg: function() {const { imgPreview } = this.datalet url = imgPreviewtt.previewImage({urls: [url], // 图片地址列表current: 1, //默认显示的图片的地址success: (res) => {console.log('预览调用成功');},fail: (res) =>{console.log('预览调用失败');}});},// 删除选中的图片deleteImg: function() {const { imgPreview } = this.datathis.setData({imgPreview: ''})}
});