uniapp上传

一. uniapp  uni-file-picker 上传（结合form）

<template>
	<view class="loadingPage">
		<uni-forms ref="form" :modelValue="formData" :rules="formRules" label-width="90px">
			<uni-forms-item label="充值金额" name="withdrawalAmt">
				<uni-easyinput type="digit" v-model="formData.withdrawalAmt" placeholder="请输入充值金额" />
			</uni-forms-item>
			<uni-forms-item label="提现方式" name="moneyCodeType">
				<uni-data-select
				  v-model="formData.moneyCodeType"
				  :localdata="txRange"
				  @change="txChange"
				></uni-data-select>
			</uni-forms-item>
			<uni-forms-item name="moneyCodeUrl" label="提现二维码">
				<uni-file-picker
					v-model="uploadFileArr"
					fileMediatype="image"
					mode="grid"
					:limit="1"
					:image-styles="imageStyles"
					@select="handdleSelect"
					@progress="handleProgress"
					@success="handleSuccess"
					@fail="handleFail"
				/>
			</uni-forms-item>
		</uni-forms>
		<button type="warn" @click="submitForm">提交</button>
	</view>
</template>

<script>
	import config from '@/config.js'
	import { withdrawal, } from "@/api/pay.js";
	export default {
		data() {
			return {
				username: '',
				// 表单数据
				formData: {
					withdrawalAmt: '',
					moneyCodeType: '',
					moneyCodeUrl: ''
				},
				uploadFileArr: [],
				formRules: {
					withdrawalAmt: {
						rules: [{
								required: true,
								errorMessage: '请输入充值金额',
							}
						]
					},
					moneyCodeType: {
						rules: [{
							required: true,
							errorMessage: '请选择提现方式',
						}]
					},
				},
				txRange: [
					{ value: '1', text: "微信" },
					{ value: '2', text: "支付宝" },
				],
				imageStyles: {
					'width': 120,
					'height': 120,
				},
			}
		},
		onLoad(options) {
			this.username = options.username
			console.log(JSON.parse(this.username))
		},
		methods: {
			txChange(e) {
				console.log("e:", e);
			},
			submitForm() {
				let _this = this
				this.$refs.form.validate().then(res=>{
					console.log('表单数据信息：', res);
					if(!_this.formData.moneyCodeUrl) {
						uni.showToast({
							title: '请上传提现二维码',
							icon: 'none'
						})
						return
					}
					withdrawal(JSON.parse(this.username), _this.formData).then(res=> {
						console.log(res)
						if(res.code==200) {
							uni.showToast({
								title: '上传成功',
								icon: 'none'
							})
							setTimeout(function(){
								uni.redirectTo({
									url: '/pages/person/index'
								})
							}, 1500)
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			},
			handdleSelect(e) {
				const tempFiles = e.tempFiles;
				let _this = this
				this.uploadFileArr = tempFiles
				console.log(config.pro.baseUrl, e)
				uni.uploadFile({
				 	url: config.pro.baseUrl + '/users/uploadMoneyCode', //仅为示例，非真实的接口地址
				 	filePath: tempFiles[0].path,
				 	name: 'file',
				 	formData: {},
				 	headers: {
				 		'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
                        'Authorization': 'Bearer ' + uni.getStorageSync('authToken')
				 	},
				 	success: (res) => {
				 		console.log('zzz',res);
                        var data = JSON.parse(res.data);
				 		if(data.code==200) {
				 			this.formData.moneyCodeUrl = data.data
				 		} else {
                            console.error('上传失败：', data.message);
                        }
				 	}
				 });
				// 小程序中上传图片
				//wx.uploadFile({
				   // url: config.pro.baseUrl + '/users/uploadMoneyCode', // 你的Java接口地址
				   // filePath: tempFiles[0].path,
				   // name: 'file',
					//formData: {},
					//header: {
				//		'content-type': 'application/x-www-form-urlencoded;charset=UTF-8',
				//		'Authorization': 'Bearer ' + uni.getStorageSync('authToken')
				//	},
				//    success: function (res) {
				//      console.log(res);
				//      var data = JSON.parse(res.data);
				//      if (data.code==200) {
				//        console.log('上传成功，图片URL:', data.data);
				        // 你可以在这里处理上传成功后的逻辑，例如显示图片或者保存图片的URL
				//		_this.formData.moneyCodeUrl = data.data
				//      } else {
				//        console.error('上传失败：', data.message);
				//      }
				//    },
				//    fail: function (error) {
				//      console.error('上传失败：', error);
				//    }
				//});
			},
			handleProgress(e) {
				console.log('上传完成：', e)
			},
			handleSuccess(e) {
				console.log('上传成功：', e)
			},
			handleFail(e) {
				this.uploadFileArr = []
				this.formData.moneyCodeUrl = ''
				console.log('上传失败：', e)
			},
		}
	}
</script>

<style lang="less" scoped>
	.loadingPage {
		padding: 20rpx;
	}
</style>

二. uni.chooseImage

uni.chooseImage(OBJECT) | uni-app官网

uni.chooseImage({
	count: 1, //默认9 图片数量
    crop: { // 上传图片大小
        width: 80,
        height: 80,
    },
	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
	success: function (e) {
		console.log(JSON.stringify(e.tempFilePaths));
        if(Math.ceil(e.tempFiles[0].size / 1024) > 10240) {
            uni.showToast({
                title: '头像大小不能超过10MB',
                icon: 'none'
            })
            return
        }
        this.uploadImage(e.tempFiles[0])
	}
});
uploadImage(imgObj) {
    let _this = this
    uni.uploadFile({
        url: this.configUrl + '/api/upload',
        filePath: img.path,
        name: 'file',
        formData: {},
        timeOut: 10000,
        success: (res)=> {
            console.log(res.data)
            let data = JSON.parse(res.data)
            if(data.isOk && data.data.path) {
                _this.activeData.headerImg = data.data.path
                uni.showToast({
                    icon: 'success',
                    title: '修改成功'
                })
            } else {
                uni.showToast({
                    icon: 'none',
                    title: data.message
                })
                return
            }
        },
        fail: (err)=> {
            uni.showToast({
               icon: 'none',
               title: '上传失败，请稍后再试'
            })
        }
    })
}