一. 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: '上传失败,请稍后再试'
})
}
})
}