uniapp+uview实现图片的上传预览，携带额外参数，headers

可以直接按照官网给的例子来，需要注意的就是额外携带参数的话要如何配置，我这里的 upFileData，和 headers是直接写在data里边的 headers 是在 onload 中获取了localStorage的token

一、携带额外参数（uview 1x）

:form-data="upFileData" :header="headers"

一、携带额外参数（uview 2x）

修改官网 给出的例子 中的uploadFilePromise方法 ，携带请求头和 额外参数都是在这里改，直接加在属性上无效（按照uview 1x的方法无效）

    header: this.headers,
	name: 'file',
	formData: {
		bussinessId: this.info.id,
		type: 'photo'
    },

uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.action, // 仅为示例，非真实的接口地址
						filePath: url,
						header: this.headers,
						name: 'file',
						formData: {
							bussinessId: this.info.id,
							type: 'photo'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},

<u-modal v-model="upFile" title="" :async-close="false" :mask-close-able="true" :show-confirm-button="false">
	<!-- 上传 -->
	<u-upload style="margin: 0 0 20px 20px;" :action="action" :fileList="fileListfile" @afterRead="afterRead"
		:form-data="upFileData" :header="headers" @delete="deletePic" @on-success="success" name="file" multiple
		:maxCount="10">
	</u-upload>
</u-modal>

二、预览图片

<!-- 预览的弹窗 -->
<u-modal v-model="lookFile" title="" :async-close="false" :mask-close-able="true" :show-confirm-button="false">
	<view class="fileBox">
		<u-image class="fileBoxImg" v-for="ite in prewList" :showLoading="true" :src="getFullUrl(ite.id)"
			width="80px" height="80px" @click="lookPhoto(ite.id)"></u-image>
	</view>
</u-modal>

主要是使用 uni.previewImage

lookPhoto(id) {
		//预览图片
		var urlList = []
		let url = 'http://cczs.xxxx.com/ccbg/sys/cloud/file/xxxx?id=' + id  //可以直接查看图片的地址
		urlList.push(url) //push中的参数为 :src="" 中的图片地址
		uni.previewImage({
		urls: urlList
	})
},

三、提示填写请求路径

:action="http://cczs.xxxx.com/ccbg/sys/cloud/file/upload"

uview官网 ：https://www.uviewui.com/components/upload.html