上传头像

template部分

<!-- 通过userImgShow判断是显示图片还是显示上传按钮，如果删除了图片就把userImgShow改为false -->
<view v-if="userImgShow" class="imgShow">
	<u-tag type="error" size="size" mode="dark" shape="circle" closeable @close="modalShow = true" />
	<image class="img" :src="userImg" mode="" @click="bigImg"></image>
</view>
<view v-else class="imgShow">
	<u-upload
	  ref="uUpload"
	  :action="action"
	  :custom-btn="true"
	  :auto-upload="true"
	  :max-size="1 * 1024 * 1024"
	  @on-change="onChoose"
	  max-count="1"
	  width="140"
	  height="140"
	  @on-list-change="onListChange"
	>
		<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
			<u-icon name="plus" label="上传图片" label-size="24" label-pos="bottom" size="60" :color="$u.color['lightColor']"></u-icon>
		</view>
	</u-upload>
</view>

js

export default {
		data() {
			return {
				userImg: '', // 用户头像
				action: 'https://xxxxxx.cn/attachment/upload',// 服务器地址，必配
				fileList: [], // 显示上传后的图片的列表，但我这里直接把
			}
		},
		methods: {
			// 每次选择图片后触发
			onChoose(){
				//获取图片路径
				let imgpat = this.$refs.uUpload.lists;
				// 将图片上传到服务器
				uni.uploadFile({
					url: 'https://xxxxxxxxx.cn/attachment/upload', // 图片要上传的服务器地址
					filePath: imgpat[0].file.path,
					name: 'file',
					success: (res) => {
						if (res.statusCode === 200) {
							this.$refs.uToast.show({
								title: '更新成功',
								type: 'success',
							})
						}
					}
				})
				// 更新视图
				this.userImg = imgpat[0].response.data.url;
				
				// 把服务器返回的路径传给后端
				this.$u.api.updateUserinfo({
					// avatar: imgpat[0].response.data.url // 这里使用imgpat效果一样
					avatar: this.userImg
				})
			},
			// 确认删除头像
			imgConfirm(){
				this.userImgShow = false;
				this.userImg = '';
			},
			// 点击头像打开大图
			bigImg(){
				 this.maskShow = true;
			},
		}

搞了一天，uview1.0上传图片是真麻烦啊。
因为uview1.0里的请求不能进行上传，也就是不能upload，所以就不能把上传服务器的接口进行封装，这里采用的是uni.uploadFile

注意：action是必须配置的

上传多张图片（发布）

// 每次选择图片后触发
onChoose(){
	//获取图片路径
	let imgpat = this.$refs.uUpload.lists;
	let str = ''
	for (var i = 0; i < imgpat.length; i++) {
		str = imgpat[i].response.data.url;
	}
	this.FormData.push(str)
	console.log(this.FormData);
	// 将图片上传到服务器
	uni.uploadFile({
		url: 'https://xxxxxxxxxxxx/attachment/upload',
		filePath: this.FormData,
		name: 'file'
	});
},
// 点击发布
submit() {
	//1. 文本域有东西吗？
	if( !this.content ){
		alert('请输入内容');
		return false;
	}
	
	this.$u.api.publish({
		latitude:this.latitude,
		longitude:this.longitude,
		content:this.content,
		talk:this.topChick,
		type:1,
		address:this.location,
		imgs:JSON.stringify(this.FormData) // 传给后端时需要转换一下
	}).then(res => {
		if(res.code!=0){
			this.$refs.uToast.show({
				title: '发布失败'
			})
			return false;
		}
		this.modalshow = true;
		this.content = '';
	});
},