crmcard/pages/file/uploadFile.vue

<template>
	<view class="uploadFile">
		<uni-menubar title="文件上传" />
		<tm-sheet>
			<tm-input :padding="[0,12]" title="文件名称" v-model="form.name" placeholder="请输入文件名称">
			</tm-input>

			<view class="mt-40 flex flex-between">
				<view style="font-size: 26rpx;">
					选择分类
				</view>
				<view>
					<picker @change="bindPickerChange" :value="form.cate_id" range-key="name" :range="cateList">
						<view  style="font-size: 26rpx;">{{form.cate_id  ? cateList.find(v=>v.id == form.cate_id)['name'] : '请选择分类'}}</view>
					</picker>
				</view>
			</view>
			<view class="mt-40">
				<view class="mb-20" style="font-size: 26rpx;">
					上传文件缩略图
				</view>
				<view>
					<tm-upload ref="upload" :code="200" :max="1" :tips="false" :grid="4"
						url="https://cardoa.platomix.net/api/upload" url-key="data" :auto-upload="true" :header="header"
						:filelist.sync="form.thumb"></tm-upload>
				</view>
			</view>
			<view class="mt-40">
				<view class="mb-20" style="font-size: 26rpx;">
					上传文件<text style="color:#F44336;">(只能选择微信聊天中的文件)</text>
				</view>
				<view class="mt-20" style="display: flex;justify-content: space-between;">
					<view style="color: #2196F3;width: 80%;" v-if="form.path">{{form.name}}.{{form.ext}}</view>
					<tm-button theme="blue" size="m" @click="fileAllClick">{{ form.path ? '重新选择' : '选择文件' }}
					</tm-button>
				</view>
			</view>
			<view class="mt-40">
				<view class="mb-20" style="font-size: 26rpx;">
					是否开放
				</view>
				<view>
					<tm-switch color="blue" v-model="form.showc"></tm-switch>
				</view>
			</view>
			<view class="mt-40">
				<tm-button theme="blue" block @click="uploadFile">提交保存</tm-button>
			</view>
		</tm-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					path: '',
					name: '',
					cate_id: '',
					thumb: [],
					showc: true,
				},
				cateList: [],
				header: {
					'Authorization': uni.getStorageSync('token'),
					'Content-Type': 'multipart/form-data'
				}
			}
		},
		onLoad(option) {
			this.$tm.request.post('file/cate').then(res => {
				this.cateList = res.data
			})
			if (option.id) {
				this.form.id = option.id
				this.$tm.request.post('file/detail', this.form).then(res => {
					this.form = res.data
					this.form.cate_id = res.data.pid
					this.form.thumb = [this.form.thumb]
				})
			}
			if (option.pid > 0) {
				this.form.cate_id = option.pid
			}
		},
		methods: {
			bindPickerChange(o) {
				this.form.cate_id = this.cateList[o.detail.value].id
			},
			// 上传任意文件
			fileAllClick() {
				let that = this
				that.isUpload = 0
				let uploadTask
				uploadTask = uni.chooseMessageFile({
					count: 1,
					type: 'all',
					success(res) {
						that.form.size = res.tempFiles[0].size
						that.form.name = res.tempFiles[0].name.substring(0, res.tempFiles[0].name.lastIndexOf("."))
						that.form.ext = res.tempFiles[0].name.substring(res.tempFiles[0].name.lastIndexOf(".") + 1)
						uploadTask = uni.uploadFile({
							url: 'https://cardoa.platomix.net/api/upload', //仅为示例，非真实的接口地址
							filePath: res.tempFiles[0].path,
							name: 'file',
							header: that.header,
							success(res) {
								const data = JSON.parse(res.data)
								that.form.path = data.data
								uploadTask.abort()
							}
						})
						uploadTask.onProgressUpdate((res) => {
							uni.showToast({
								title: '已上传' + res.progress + '%',
								icon: "none",
								mask: true
							});
						});
					}
				})
			},
			uploadFile() {
				if (this.form.path == '') {
					uni.showToast({
						title: "请上传文件",
						icon: "none"
					})
					return false
				}
				this.form.thumb = this.form.thumb ? this.form.thumb[0] : ''
				this.$tm.request.post('file/update', this.form).then(res => {
					uni.showToast({
						title: "上传成功!",
						icon: "none"
					})
					setTimeout(() => {
						uni.navigateBack({
							success: () => {
								uni.$emit('refresh')
							}
						})
					}, 1000)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fileButton {
		width: 100%;
		position: fixed;
		bottom: 0
	}
</style>