xiaofangweibao-applet/pages/itemlist/itemlist.vue

<template>
	<view class="content">
		<u-form :model="model">
			<u-form-item label="姓名">
				<u-input v-model="model.name" placeholder="请输入姓名" border="bottom" clearable></u-input>
			</u-form-item>

			<u-form-item label="性别">
				<u-radio-group v-model="model.gender">
					<u-radio label="男" name="男">男</u-radio>
					<u-radio label="女" name="女">女</u-radio>
				</u-radio-group>
			</u-form-item>

			<u-form-item label="简介">
				<u-textarea v-model="model.intro" placeholder="请输入简介"></u-textarea>
			</u-form-item>

			<u-form-item label="上传图片" label-width='150rpx'>
				<!-- <u-upload :fileList="model.FileList1" @afterRead="afterRead" @delete="deletePic"   name="1" multiple :maxCount="2" :previewImage="true" deletable="true">
			    <!-- 这张图片就是自定义的图片，地址填写自己本地的就行 -->
				<!-- </u-upload> -->
				<view class="media-container">
					<jade-image-upload :list="model.FileList1" :control="control" :maxCount="maxCount"
						:compressSize="compressSize" :compressQuality="compressQuality" :compressWidth='compressWidth'
						:imageSize="imageSize" @chooseFile="chooseFile" @imgDelete="mediaDelete">
					</jade-image-upload>

				</view>

			</u-form-item>
			<u-button type="primary" @click="submitForm">提交</u-button>
		</u-form>
	</view>
</template>

<script>
	import {
		getConfig
	} from '@/utils/auth';
	export default {
		data() {
			return {
				model: {
					name: '',
					gender: '',
					intro: '',
					FileList1: [],
				},
				control: true,
				maxCount: 6,
				compressSize: 0.2,
				imageSize: 2,
				compressQuality: 0.8,
				compressWidth: 375,
				uploadTask: null,
				media: [], //数据源
			}
		},
		onLoad() {
			// this.login()
		},
		methods: {
			// login() {
			// 	let that = this
			// 	uni.login({
			// 		provider: 'weixin',
			// 		success: function(loginRes) {
			// 			let form = {};
			// 			form.code = loginRes.code; //用户code  注:用户的code每次登录都是随机的，所以不需要进行存储
			// 			uni.showLoading({
			// 				title: "登录中....",
			// 				mask: true
			// 			})
			// 			that.request('wxlogin', form, 'POST').then(wxloginres => {
			// 				console.log("wxloginres: ", wxloginres)
			// 				if (wxloginres.code == 0) {
			// 					uni.hideLoading()
			// 					setTimeout(function() {
			// 						uni.hideLoading();
			// 					}, 2000);
			// 					setToken(wxloginres.data.openid)
			// 					setUserInfo(wxloginres.data); //模拟存储用户信息
			// 					//成功后进入头像与昵称修改页面
			// 					uni.navigateTo({
			// 						url: '/pages/me/userinfo'
			// 					})
			// 				}
			// 			})
			// 		},
			// 	});
			// },
			//上传
			chooseFile(e) {
				this.uploadFileToServe(e)
				console.log(e, '----===');

			},
			//中断上传并删除
			mediaDelete(e) {
				this.uploadTask ? this.uploadTask.abort() : ''
				this.media.splice(e, 1)
			},
			//上传逻辑处理
			uploadFileToServe(urlList) {
				if (!urlList || urlList.length <= 0) {
					return
				};
				let url = getConfig().uploadUrl;
				this.request(url, 'POST').then(res => {
					console.log("res:", res)
					// if (res) {
					// 	console.log(res);

					// }
				})
				//以七牛云为例,可根据实际需求灵活调整
				// uni.request({
				//     url: getConfig().uploadUrl, //后端接口，仅为示例，并非真实接口地址。
				//     method: 'POST',
				//     success: (res) => {
				//         let token = res.data.data; //拿到上传七牛所必须的token
				//         urlList.forEach((item) => {
				//             this.uploadTask = uni.uploadFile({
				//                 url: getConfig().uploadUrl, //七牛上传接口，仅为示例
				//                 filePath: item.src,
				//                 name: 'file',
				//                 formData: {
				//                     'token': token
				//                 },
				//                 success: (res) => {
				//                     let data = JSON.parse(res.data) //七牛返回的数据
				//                     if (!data.data.url) {
				//                         item.status = 'error'
				//                         item.progress = '上传失败'
				//                     } else {
				//                         item.status = 'success'
				//                         item.progress = '上传成功'
				//                         item.src = data.data.url
				//                     }
				//                 }
				//             });
				//             this.uploadTask.Update((res) => {
				//                 item.percent = res.progress
				//                 this.media.splice(item.index,1,item)
				//             })
				//         })
				//     }
				// });
			},

			submitForm() {
				console.log(this.model, '----');
			}


		}
	}
</script>

<style lang="scss">
	.body {
		background-color: #fff;
	}

	.content {
		padding: 50rpx;
		width: 100%;
		height: 1200rpx;
		background-color: #fff;
	}

	.media-container {
		padding: 30rpx 26rpx;
		box-sizing: border-box;
	}
</style>