uniapp 移动端上传文件

<template>
	<view class="photo-control">
		<text class="photo-header"><text class="red bold ml18" v-if="required">*</text><text class="ml16 light">文件上传</text></text>
		<view class="photo-container">			
			<view  class="photo plus"
				:style="{'width': imgSize, 'height': imgSize}"
				@click="attchChoose.onClick">
				<text class="icon iconfont yn-plus"></text>
			</view>
		</view>
	</view>
</template>
<script>
	import { Base_Api,dev } from '@/common/config.js'
	
	export default {
		props: {
			parentPadding: {
				type: Number,
				default: 60
			},
			required: {
				type: Boolean,
				default: false
			},
			fileType: {
				type: String,
				default: "",
			}
		},
		data() {
			return {
				fileSrc: ""
			}
		},
		computed: {
			imgSize() {
				/**
				 * this.parentPadding 父容器的padding左右之和
				 * 2*21：.photo的margin-right: 21rpx（只有每一行的第一第二张图片有margin-right）
				 */
				return `calc((100vw - ${this.parentPadding+2*21}rpx)/3)`
			}
		},
		methods: {
			async upload(path) {
				  let str = path +''
				  let index = str.lastIndexOf("/")
				  let urlName = str.substring(index+1,str.length);
				  //ECU限制
				  if (!/\.(hex|s19)$/.test(urlName)) {
						uni.showToast({
						    title: '请上传正确格式',  
							duration: 2000, 
							icon : 'error'
						})
						return
				  } 
				  console.log(Base_Api)
					uni.showLoading({
						title: '上传中'
					});
				try {
					uni.uploadFile({
						url:‘’', // 上传接口地址
						filePath: path, // 本地路径
						name: 'file', // 后端接收文件的字段名
						formData: {
							fileName:urlName
						},
						header: {
							// "Content-Type":"application/json"
						},
						success: (res) => {
							console.log(res)
							if (res.statusCode == 200) { 
								uni.hideLoading();
								console.log("上传成功了");
								uni.showToast({
								 title: '上传成功了',   //  title 表示要显示文字内容
								 duration: 2000,  // 设置显示的时间  
								 icon : 'success'   // 设置显示的图标    success  成功    error 失败  none 不显示 
								})
								this.$emit('file', JSON.parse(res.data))
							} else {
								throw res
							}
						},
						fail: (err) => {
							// reject(err);
							uni.hideLoading();
							console.log(err);
								uni.showToast({
								 title: '上传失败了',   //  title 表示要显示文字内容
								 duration: 2000,  // 设置显示的时间  
								 icon : 'error'   // 设置显示的图标    success  成功    error 失败  none 不显示 
								})
							throw err
						}
					});
				} catch (e) {
					console.log(e);
					uni.showToast({
					title: '上传失败了',   //  title 表示要显示文字内容
					duration: 2000,  // 设置显示的时间  
					icon : 'error'   // 设置显示的图标    success  成功    error 失败  none 不显示 
					})
				}
			},
			async chooseFile(data) {
				try {
					// this.fileSrc = data.base64Str;
					const fileUrl = await this.base64toPath(data.base64Str, data.attachName);
					console.log(fileUrl);
					this.upload(fileUrl.relativePath)
				} catch (e) {
					console.log("err", e);
				}
			},
			/**
			 * @param {Object} base64 文件base64
			 * @param {Object} attachName //文件名需要后缀，如：张三.jpg
			 */
			async base64toPath(base64, attachName) {
				let _that = this;
				return new Promise(function(resolve, reject) {
					const filePath = `_doc/yourFilePath/${attachName}`;
					plus.io.resolveLocalFileSystemURL('_doc', function(entry) {
						entry.getDirectory("yourFilePath", {
							create: true,
							exclusive: false,
						}, function(entry) {
							entry.getFile(attachName, {
								create: true,
								exclusive: false,
							}, function(entry) {
								entry.createWriter(function(writer) {
									writer.onwrite = function(res) {
										const obj = {
											relativePath: filePath,
											localAbsolutePath: plus.io
												.convertLocalFileSystemURL(
													filePath)
										}
										resolve(obj);
									}
									writer.onerror = reject;
									writer.seek(0);
									writer.writeAsBinary(_that
										.getSymbolAfterString(base64,
											','));
								}, reject)
							}, reject)
						}, reject)
					}, reject)
				})
			},
			// 取某个符号后面的字符
			getSymbolAfterString(val, symbolStr) {
				if (val == undefined || val == null || val == "") {
					return "";
				}
				val = val.toString();
				const index = val.indexOf(symbolStr);
				if (index != -1) {
					val = val.substring(index + 1, val.length);
					return val;
				} else {
					return val
				}
			}
		}
	}
</script>
<script module="attchChoose" lang="renderjs">
	let fileInputDom = null;
	export default {
		methods: {
			createFileInputDom() {
				fileInputDom = document.createElement("input");
				fileInputDom.setAttribute('type', 'file');
				fileInputDom.setAttribute('accept', '*');
			},
			onClick(event, ownerInstance) {
				if (!fileInputDom) {
					this.createFileInputDom();
				}
				fileInputDom.click(); // 模拟click
				fileInputDom.addEventListener('change', (e) => {
					fileInputDom = null;
					let choicesFiles = e.target.files[0];
					let reader = new FileReader();
					//读取图像文件 result 为 DataURL, DataURL 可直接 赋值给 img.src
					reader.readAsDataURL(choicesFiles);
					reader.onload = function(event) {
						const base64Str = event.target.result; // 文件的base64
						ownerInstance.callMethod('chooseFile', {
							attachName: choicesFiles.name,
							size: choicesFiles.size,
							base64Str,
						})
					}
					e.target.value = "";
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.photo-control {
		display: flex;
		flex-flow: column nowrap;

		.photo-header {
			text {
				font-size: 24rpx;
			}
		}

		.photo-container {
			display: flex;
			flex-flow: row wrap;
			margin-top: 16rpx;

			.photo {
				&:not(:nth-child(3n)) {
					margin-right: 21rpx;
				}
				
				display: flex;
				flex-flow: column nowrap;
				justify-content: center;
				align-items: center;
				position: relative;
				margin-bottom: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
				
				.img-clear {
					position: absolute;
					top: 0;
					right: 0;
					background: #7C7F85;
					width: 36rpx;
					height: 36rpx;
					border-radius: 5rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #FFFFFF;
					
					.icon {
						font-size: 32rpx;
					}
				}

				&.plus {
					background-color: #f6f6f6;

					.iconfont {
						color: #bbb;
						font-size: 60rpx;
					}

					text {
						color: #999;
					}
				}
			}
		}
	}
</style>