Upload 上传：图片上传

需要用到的API

action：服务器上传地址
max-count：最大选择图片的数量
form-data：上传额外携带的参数
name：上传文件的字段名，供后端获取使用

第一种：选择图片后，直接上传

<template>
	<view class="index">
		<u-upload 
		:show-progress="false"
		:action="action" 
		:form-data="formData" 
		max-count="3" 
		name="file"
		@on-uploaded="onUploaded"  
		@on-change="onChange"></u-upload>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 演示地址，请勿直接使用
				action: 'https://api.diandianhg.com/api/common/upload',
				formData: {
					access_token:uni.getStorageSync('access_token')
				},
				fileList: []
			}
		},
		methods:{
			// 上传成功
			onUploaded(res) {
				this.fileList = res;
				console.log(this.fileList);
			},
			// 无论成功失败都会触发
			onChange(res){
				let data = JSON.parse(res.data)
				if(data.code == 0){
					console.log(data)
					uni.showToast({
						icon:'none',
						title: data.msg,
					});
				}
			}
		}
	}
</script>

url: 图片地址
error：组件内部使用，不应根据此值判断上传是否成功，而应根据progress属性
progress：如果值为100，表示图片上传成功
response：上传成功后，服务器返回的数据，这是最有用的了

上传失败的情况提示，

碰到的BUG：
1、发布文章，需要上传图片（最多三张）
2、发布成功后，可以进行修改，需要把之前上传的的图片显示出来，这里用 fileList 数组存。

官方描述：

可以通过设置file-list参数(数组，元素为对象)，显示预置的图片。其中元素的url属性为图片路径

<u-upload 
	:show-progress="false" 
	:action="action" 
	:form-data="formData" max-count="3"
	name="file" 
	:file-list="fileList" 
	@on-uploaded="onUploaded" 
	@on-remove="onRemove">
</u-upload>

<script>
// data中定义的两个数组：
fileList:[], // 显示默认的图片，以及修改后的图片集合
imgArr:[], // 未修改的图片集合
// 把之前上传过的图片，分别存入fileList和imgArr。
item.attaches.forEach((item, index) => {
	this.fileList.push({
		path:item.path
	})
	this.imgArr.push({
		url:this.$imgUrl+item.path,
		path:item.path
	})
})
onUploaded(res) {
	this.fileList = res;
},
// 删除
onRemove(e) {
	this.imgArr.splice(e, 1)
},

let str = [];
let medias = [];
// 编辑内容
if(this.edit == 1){
	// 如果item.response && item.response.code == 1，说明已经进行了修改，把修改后的 重新上传的图片url 存入str。
	this.fileList.forEach(item=>{
		if(item.response && item.response.code == 1){
			str.push(item.response.data.url)
		}
	})
	
	// 如果未修改的图片没有删除完，就把未删除的图片也存入 str 。
	if(this.imgArr.length>0){
		this.imgArr.forEach(item=>{
			if(item.path){
				str.push(item.path)
			}
		})
	}
}
</script>

这里说下为什么不能直接要用两个数组存。
这是默认一进来，自己组合数据后的fileList

如果你修改了其中一张图片，数据格式会出现错误。