upload.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<u-upload
	accept="image"
	capture="['album', 'camera']"
	:previewImage="true"
	width="200"
	height="200"
	:fileList="fileList"
	@afterRead="afterRead"
	@delete="deletePic"
	name="uploader-componet"
	multiple
	:maxCount="9"
>
	<div style="background-color: #f4f5f7;width:200rpx;height:200rpx;display: flex;align-items: center;justify-content: center;border-radius: 4rpx;box-sizing: border-box;">
		<u-icon name="camera-fill" color="#D3D4D6" size="50"></u-icon>
	</div>
</u-upload>

<u-button type="primary" :plain="true" text="提交申请"
	@click="submitRefundApplyHandle()">
</u-button>
script.js
1
2
3
4
5
6
<script>
	import refundApi from '@/api/refund.js'
	export default{
		data(){
			return {
				fileList:[],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
submitRefundApplyHandle(){
	// this.$refs.refRefundApplyForm.validate().then(res => {
	// 	uni.$u.toast('校验通过')
	// }).catch(errors => {
	// 	uni.$u.toast('校验失败')
	// })
	let formObj = deepCopy(this.refundApplyForm)
	formObj.reasonType = this.transf_reasonType[formObj.reasonType]
	this.applyRefundHandle(formObj)
},
applyRefundHandle(formObj){
	console.log('提交的表单：', formObj,this.fileList)
	const arr_temp = []
	this.fileList.forEach((item,index) => {
		arr_temp.push({name:'image'+index,uri: item.url})
	})
	// formObj.annexFiles = this.fileList
	let requestLength = 0
	const annexFileIds = []
	arr_temp.forEach((ele,index) => {
		refundApi.uploadRefundAnnexFile(arr_temp[index], 'file').then(res => {
			const response = JSON.parse(res)
			console.log('上传照片结果:',response)
			if (response.code === 200) {
				++requestLength
				annexFileIds.push(response.data)
				if(requestLength===arr_temp.length){
					formObj.annexFileIds = annexFileIds.join()
					refundApi.createRefundApply(formObj).then(res => {
						console.log('提交申请结果:',res)
						if (res.code === 200) {
							// 跳转到结果页
							uni.reLaunch({
								url: '/pages/my/refundApply/refundResult?pageMsg=申请成功，请等待人员审核'
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 5000,
							})
						}
					})
				}
			} else {

			}
		})
	})

},

// 删除图片
deletePic(event) {
	this.fileList.splice(event.index, 1)
},
afterRead(event) {
	console.log('照片地址:', event)
	// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
	let lists = [].concat(event.file)
	let fileListLen = this.fileList.length
	lists.map((item) => {
		this.fileList.push({
			...item,
			status: 'uploading',
			message: '上传中'
		})
	})
	for (let i = 0; i < lists.length; i++) {
		const url = lists[i].url
		let item = this.fileList[fileListLen]
		this.fileList.splice(fileListLen, 1, Object.assign(item, {
			status: 'success',
			message: '',
			url: url
		}))
		fileListLen++
	}
},
config/request.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
function uploadFile_common (url, file, name, callback = '') {
	const token = uni.getStorageSync('user_token')
	return new Promise((resolve, reject) => {
		console.log('拿到的参数：', url, file, name)
        uni.uploadFile({
			url: baseUrl + url,
            header: { 'Authorization': 'Bearer ' + token, 'Content-Type': 'multipart/form-data' },
			fileType:'image',
            filePath: file.uri,
            name: name,
            success: res => {

            },
            fail: err => {
                reject(err)
                console.log('[上传接口错误:uploadFile_common:',err)
            },
            complete: res => {
                if (callback){
                	return callback(res.data)
                }
                if (res.data.code === 401) {
                    console.log('上传接口401:uploadFile_common')
					try {
						uni.removeStorageSync('user_token')
					} catch (e) {
						console.log('user_token移除失败(uploadFile_common)')
					}
					// 将需要重新执行的接口缓存到一个队列中
					addSubscriber(() => {
						uploadFile_common(url, file, name, formData, resolve)
					})
					if (isRefreshing) {
						getNewToken().then(() => {
							// 依次去执行缓存的接口
							onAccessTokenFetched();
							isRefreshing = true;
						}).catch(e => {
							console.log('getNewToken错误(uploadFile_common):', e)
						})
                   }
                   isRefreshing = false;
                } else {
                    resolve(res.data)
                }
            }
        })
	})
}
export { uploadFile_common }
refund.js
1
2
3
4
5
6
7
8
import {uploadFile_common} from '@/config/request.js'
export default {
	// 上传申请照片
	uploadRefundAnnexFile(file, name) {
		return uploadFile_common('/wechat/selfPrint/refundApply/uploadRefundApplyAnnexFile', file, name)
	},

}
refundResult.vue 上传成功后展示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<template>
	<view class="content">
		<view >
			<u--image :showLoading="true" :src="require('static/img/my/submit.png')" width="500rpx" height="500rpx">
			</u--image>
			<view class="text-style">{{message}}</view>
			<view class="mg30">
				<u-button type="primary" :plain="true" text="返回首页"
					@click="backHome()">
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				message:''
			}
		},
		onLoad:function(option){
			this.message = option.pageMsg
		},
		methods:{
			backHome(){
				uni.switchTab({
					url: '/pages/home/index'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		margin-top: 100rpx;
		padding: 30rpx;
		display: flex;
		justify-content: center;;
	}
	.text-style{
		color: #aaa;
		text-align: center;
	}
	.mg30{
		margin-top: 30rpx;
	}
</style>