starter-uniapp-uview/components/form/formUpload.vue

<template>
	<view style="padding: 10rpx 0;">
		<view class="card flex v" v-if="!value" @click="sheetShow = true">
			<u-icon name="plus" color="#838383" size="34"></u-icon>
			<text>选择文件</text>
		</view>
		<view class="card flex v" v-if="value" @click="sheetShow = true">
			<u-image width="100%" height="300rpx" :src="src">
				<view slot="error">
					<u-icon name="file-text" color="#838383" size="34"></u-icon>
				</view>
			</u-image>
		</view>
		<text v-if="!isUpload && !value && placeholder">{{placeholder}}</text>
		<view v-if="isUpload">
			<u-loading mode="circle"></u-loading>
			<text>上传中</text>
		</view>

		<u-action-sheet :list="sheetData" v-model="sheetShow" @click="clickSheet"></u-action-sheet>
	</view>
</template>

<script>
	import config from '../../api/config.js'

	export default {
		props: {
			value: {
				type: String,
				default: null
			},
			placeholder: {
				type: String,
				default: null
			}
		},
		data() {
			return {
				isUpload: false,
				sheetShow: false
			}
		},
		computed: {
			src() {
				console.log(config.baseURL + '/filePreview?filePath=' + this.value)
				return config.baseURL + '/filePreview?filePath=' + this.value;
			},
			sheetData() {
				if (!this.value) {
					return [{
						text: '照片'
					}, {
						text: '视频'
					}, {
						text: '文件'
					}]
				} else {
					return [{
						text: '照片'
					}, {
						text: '视频'
					}, {
						text: '文件'
					}, {
						text: '删除'
					}]
				}
			}
		},
		methods: {
			onUpload(file) { // 一般File对象上传
				this.isUpload = true;
				let form = new FormData();
				form.append("file", file)
				this.$axios.post('/uploadFiles', form)
					.then(response => {
						this.isUpload = false;
						if (response.code != 0) {
							this.e("上传失败")
							return;
						}

						this.$emit("change", response.message, this.value)
						this.$emit("input", response.message)
					})
					.catch(error => {
						this.isUpload = false;
						this.e(JSON.stringify(error))
					});
			},
			onUpload2(fileBase64, fileName) {// base64文件上传
				// alert(fileBase64)
				this.isUpload = true;
				let form = new FormData();
				form.append("fileBase64", fileBase64)
				form.append("fileName", fileName)
				this.$axios.post('/uploadFiles', form)
					.then(response => {
						// alert(JSON.stringify(response));
						this.isUpload = false;
						if (response.code != 0) {
							this.e("上传失败")
							return;
						}

						this.$emit("change", response.message, this.value)
						this.$emit("input", response.message)
					})
					.catch(error => {
						// alert(JSON.stringify(error));
						this.isUpload = false;
						this.e(JSON.stringify(error))
					});
			},
			clickSheet(index) {
				switch (index) {
					case 0:
						if (this.getProp('isInit')) {
							sc.isExistApi({
									path: 'chooseImage'
								},
								(res) => {
									sc.chooseImage({
											count: 1,
											sizeType: ['compressed'],
											sourceType: ['album', 'camera']
										},
										(res) => {
											if (res.code != 0) {
												this.e('选择照片出错')
												return;
											}
											this.onUpload2(res.data[0], new Date().getTime() + ".jpg");
										}
									);
								}
							);
						} else {
							this.defaultFileSelect();
						}
						break
					case 1:
						if (this.getProp('isInit')) {
							sc.isExistApi({
									path: 'chooseImage'
								},
								(res) => {
									sc.chooseVideo({
											compressed: true,
											maxDuration: 30,
											sourceType: ['album', 'camera'],
											camera: 'back'
										},
										function(res) {
											if (res.code != 0) {
												this.e('选择视频出错')
												return;
											}
											this.onUpload2(res.data.videoData,new Date().getTime() + ".mp4");
										}
									);
								}
							);
						} else {
							this.defaultFileSelect();
						}
						break
					case 2:
						this.defaultFileSelect();
						break
					case 3:
						this.$emit("change", null, this.value)
						this.$emit("input", null)
						break
				}
			},
			defaultFileSelect() {
				var input = document.createElement('input');
				input.style.display = 'none';
				input.type = "file";
				document.body.appendChild(input);
				input.dispatchEvent(new MouseEvent('click'));
				input.onchange = function (ev) {
					this.onUpload(ev.target.files[0])
					document.body.removeChild(input);
				}.bind(this)
			}
		}
	}
</script>

<style lang="less">
	.card {
		overflow: hidden;
		background: #eee;
		border-radius: 6px;
		height: 200rpx;
		width: 200rpx;
	}
</style>