uni-app web端input（file）上传文件

1. 创建上传文件标签

<view ref="input" class="input">
	附件上传
</view>

// uni-app input不支持type=“file”类型所以需要js创建
mounted() {
	// 创建附件上传
	var _self = this;
	var input = document.createElement('input');//创建元素
	input.type = 'file'//添加file类型
	input.onchange = (event) => {
		_self.upFile(input, event)
	}
	this.$refs.input.$el.appendChild(input)
},
//上传
methods: {
	upFile(input, event) {
		var _self = this;
		uni.uploadFile({
			url: url,
			files: [
				{
					file: input.files[0],
					uri: event.srcElement.value
				}
			],
			success: (uploadFileRes) => {
				console.log(uploadFileRes)
			},
			fail: (err) => {
				console.log(err)
			}
		});
	},
}

简单封装

	<view class="content">
		<view ref="input" class="input">
			<text>上传文件</text>
		</view>
	</view>

	export default {
		props:{
			url: String,
			accept: {
				type: String,
				default: ''
			}
		},
		mounted() {
			// 创建附件上传
			var _self = this;
			var input = document.createElement('input');//创建元素
			input.type = 'file'; //添加file类型
			input.accept = this.accept; //允许上传的文件类型
			input.style = 'opacity: 0;width:100px;height:35px;'
			input.onchange = (event) => {
				_self.upFile(input, event)
			}
			this.$refs.input.$el.appendChild(input)
		},
		//上传
		methods: {
			upFile(input, event) {
				var _self = this;
				uni.uploadFile({
					url: this.url,
					files: [
						{
							file: input.files[0],
							uri: event.srcElement.value
						}
					],
					success: (uploadFileRes) => {
						_self.$emit('upFileChange', uploadFileRes)
					},
					fail: (err) => {
						console.log('err:'+err)
					}
				});
			},
		}
	}

	.input{
		overflow: hidden;
		display: inline-block;
		position: relative;
		background: skyblue;
		text{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 14px;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

使用

属性	类型	默认值	说明	必传
url	String		上传到服务器的地址	是
accept	String	image/jpeg	允许上传的文件类型	否
upFileChange	EventHandle		点击上传文件触发

<uploadFile :url="url" :accept="accept" @upFileChange="upFileChange"></uploadFile>

import uploadFile from '文件路径/uploadFile.vue';
	export default {
		components:{ uploadFile },
		data(){
			return{
				url: '上传服务器地址',
				accept: 'image/jpeg' //允许上传的文件类型
			}
		},
		methods:{
			upFileChange(val){
				console.log(val)
			}
		}
	}