uniapp微信小程序图片上传功能实现，页面显示文件列表、删除功能

uniapp小程序图片上传功能效果预览
在这里插入图片描述

一、template 页面结构

<view class="upload-box"><view class="upload-list"><view class="upload-item" v-for="(item,index) of fileList" :key='index'><image class="img" src="static/czc/file-icon.png"mode=""></image><view class="name">{{item.fileName||''}}</view><view class="close-icon" @click="onDelete(index)"><uni-icons type="closeempty" size="14" color="#999"></uni-icons></view></view></view><view class="upload-img" v-if="fileList.length<6"><image class="upload-icon" @click="onClick"src="https://yjzx.netda.gov.cn:18188/static/czc/upload-icon.png" mode=""></image></view>
</view>

二、js部分

//data:
fileList: [],//methods方法
onDelete(index){//删除方法this.fileList.splice(index,1)
},
maskClick() {},
onClick() {uni.chooseImage({count: 6 - this.fileList.length, //最大六张sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'],//相册、相机选择  默认二者都有success: (chooseImageRes) => {console.log(chooseImageRes)const tempFilePaths = chooseImageRes.tempFilePaths;if(tempFilePaths){  //图片的本地文件路径列表for(let i=0;i<tempFilePaths.length;i++){uni.uploadFile({header: {Authorization:this.token //接口需要登录传 token},url:'/file/loadUploadFile', //仅为示例，非真实的接口地址filePath: tempFilePaths[i],name: 'file',formData: {},success: (res) => {console.log(res);const obj = JSON.parse(res.data)  //上传结果},fail: (err) => {console.log(err)}});}}}});
},

三、css部分

.upload-box {width: 100%;margin-top: 20rpx;.upload-img {text-align: left;.upload-icon {width: 73rpx;height: 73rpx;}}.upload-list {width: 100%;margin-top: 20rpx;.upload-item {display: flex;align-items: center;flex-wrap: wrap;justify-content: flex-start;margin-bottom: 20rpx;.img {width: 32rpx;height: 30rpx;margin-right: 10rpx;}.name {flex: 1;word-break: break-all;font-size: 30rpx;color: #3D67D6;text-align: left;padding-right: 10rpx;}}}
}