不用插件实现vue移动端上传图片和回显图片,开箱即用的移动端上传图片

不用插件实现vue移动端上传图片和回显图片,

贴入一段html代码,比较乱,但是可以开箱即用,样式可以自行调改,里面的img是我从阿里矢量图里当下来的 可以自行查找

<input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/>
							<div class="add" @click="chooseType">
								<div class="add-image" align="center" style="    position: relative;top: 17px;left: -8px;">
									<img src="/demo/static/img/yewuxitong/alijiahao.png" style="width: 75px;position: relative;    top: -11px;">
<!--									<p class="font13">添加图片</p>-->
								</div>
							</div>
							<div class="add-img" v-show="imgList.length" style="    position: relative;left:-11px">
								<p class="font14" style="    position: absolute;    bottom: -14px;">图片(最多6张，还可上传<span v-text="6-imgList.length"></span>张)</p>
								<ul class="img-list">
									<li v-for="(url,index) in imgList">
										<img class="del" src="/demo/static/img/cha.png" @click.stop="delImg(index)" style="    width: 25px;position: absolute;left: 71px;top: 17px;"/>
										<img :src="url.file.src" style="    width: 97px;height: 97px;position: absolute;top: 16px;left: -1px;">
									</li>
								</ul>
							</div>

定义data里的数据

methods里的方法

	methods: {
					chooseType() {
						document.getElementById('upload_file').click();
					},
					fileChange(el) {
						if (!el.target.files[0].size) return;
						this.fileList(el.target);
						el.target.value = ''
					},
					fileList(fileList) {
						let files = fileList.files;
						for (let i = 0; i < files.length; i++) {
							//判断是否为文件夹
							if (files[i].type != '') {
								this.fileAdd(files[i]);
							} else {
								//文件夹处理
								this.folders(fileList.items[i]);
							}
						}
					},
					//文件夹处理
					folders(files) {
						let _this = this;
						//判断是否为原生file
						if (files.kind) {
							files = files.webkitGetAsEntry();
						}
						files.createReader().readEntries(function (file) {
							for (let i = 0; i < file.length; i++) {
								if (file[i].isFile) {
									_this.foldersAdd(file[i]);
								} else {
									_this.folders(file[i]);
								}
							}
						});

					},
					foldersAdd(entry) {
						let _this = this;
						entry.file(function (file) {
							_this.fileAdd(file)
						})
					},
					fileAdd(file) {
						if (this.limit !== undefined) this.limit--;
						if (this.limit !== undefined && this.limit < 0) return;
						//总大小
						this.size = this.size + file.size;
						//判断是否为图片文件
						if (file.type.indexOf('image') == -1) {
							this.$dialog.toast({mes: '请选择图片文件'});
						} else {
							let reader = new FileReader();
							let image = new Image();
							let _this = this;
							reader.readAsDataURL(file);
							reader.onload = function () {
								file.src = this.result;
								image.onload = function(){
									let width = image.width;
									let height = image.height;
									file.width = width;
									file.height = height;
									_this.imgList.push({
										file
									});
									console.log( _this.imgList);
								};
								image.src= file.src;
							}
						}
					},
					delImg(index) {
						this.size = this.size - this.imgList[index].file.size;//总大小
						this.imgList.splice(index, 1);
						if (this.limit !== undefined) this.limit = 6-this.imgList.length;
					},
					displayImg() {

					}
				},

效果图

效果图