uniapp制作小程序的上传图片

图片选择演示

先看看效果，是不是这样的。

如果是，我可以给你点建议

首先是图片区域的wxml：

<!-- 添加图片 -->
                <view class="img_box">
                    <view class="imgShow" v-for="(item, index) in tempFilePath" :key="item.id">
                        <image :src="item" mode=""></image>
                    </view>
                    <view class="imgAdd" @click="photo()" v-if="tempFilePath.length < 9">
                        <text>+</text>
                    </view>
                </view>

此处的v-if判断是当图片小于9张才显示添加图片的那个框，img_box放选中的图片，imgAdd放图片添加按钮（就算没基础应该也看得懂吧hhhh）

wxss就不放了，按自己喜好随便写写就好

然后是js片段：

data() {
			return {
				
				tempFilePath: [],
				}，
photo: function() {
				var that = this;
				uni.chooseImage({
					sizeType: ['original', 'compressed'],
					sourceType: ['camera', 'album'], //camera 拍照 album 相册
					success: res => {
						let tempFilePaths = res.tempFilePaths
						console.log(res.tempFilePaths);
						//将临时变量赋值给已经在data中定义好的变量
						//通过concat来拼接获取到的tempFilePaths
						//concat：把tempFilePaths拼接到that.tempFilePath，此处的that.tempFilePath指的就说data中的tempFilePath
						that.tempFilePath = that.tempFilePath.concat(tempFilePaths)
					},
					fail() {
						uni.showToast({
							title: "拍照或引用相册失败",
							duration: 2000
						})
					}
				})
			},

通过uni.chooseImage这个API能调用图片的选择，详细用法可以去参考uniapp官网，我觉得写的比小程序开发文档好（不是），获取成功后就把获取到的地址存放到tempFilePaths中（注意区分这里的tempFilePaths不是data中的，用相识的是为了防止项目重名），最后拼接就好啦。

这个模块还没放删除功能，需要的可以自己研究添加

以上内容只是一个开发笔记，由一个野鸡本科的菜鸡编写，如果有疑问或者指正欢迎大家留言，我会尽快回复，大家一起进步！！！！