uview u-upload 多图上传

最新推荐文章于 2024-04-18 13:57:56 发布

liang_rujiang

最新推荐文章于 2024-04-18 13:57:56 发布

阅读量622

点赞数

文章标签： javascript uniapp 前端

本文链接：https://blog.csdn.net/liang_rujiang/article/details/130509176

版权

h5 代码

<view class="fos-36 fow-6 martb-40 flex-row-center" style="justify-content: flex-start;">
上传图片
<text class="marl-0">（{{form.image.length}}/3）</text>
</view>
<u-upload max-count="3" :action="action" :header="header" v-on:on-success="updeal" v-on:on-remove="remove" :file-list="fileList">
</u-upload>

js代码

export default {
		data() {
			return {
				form: {
					mobile: '',
					type: '',
					content: '',
					image: []
				},
                //设置header参数
                header:{
					version: 'x.x.x.x',
					token: '',
				},				
				//上传地址
				action: baseURL+'/shopapi/upload/image',//上传地址
				fileList: [],

			}
		},
		computed: {
			
		},
		methods: {
	
			updeal(e,index){
			 	this.form.image.push(e.data.uri) //上传成功加入数组
				
			},
			remove(index){
				this.form.image.splice(index,1)//移除图片
				
			}

		}
	};
</script>