34、上传图片-iview

<!-- 上传图片 -->
			<div>
				<label class="config-label">照片：</label>
				<div style="height: 130px; display: flex;">
					<div v-if="newItemObj.faceImgUrl" class="upload-img-box">
						<img :src="newItemObj.faceImgUrl">
					</div>
					<div v-for="(item, index) in newImgBase64" :key="index" class="upload-img-box">
						<img :src="item" />
						<span class="upload-img-delete" @click="deleteImg(index)">×</span>
					</div>
					<Upload
						ref="upload"
						action
						multiple
						:show-upload-list="false"
						:format="['jpg','jpeg','png']"
						:before-upload="handleBeforeUpload">
						<div class="new-upload-img">
							<span>选择图片</span>
						</div>
					</Upload>
				</div>

handleBeforeUpload(file) {
			let fileType = file.name.split(".");
            fileType = fileType[fileType.length - 1].toLowerCase();
            let typeArr = ['jpg', 'png', '.jpeg'];
            let size = file.size / 1024 / 1024;
            if(!typeArr.includes(fileType)) {
                this.$Message.warning('请上传图片类型', { type: 'warning' });
                return false;
            }
            if(size > 10) {
                this.$Message.warning('请上传10M以内的图片', { type: 'warning' });
                return false;
            }
            this.fileName = file.name;
            this.$refs["upload"].clearFiles();
            const reader = new FileReader();
            //将文件读取为 DataURL 以data:开头的字符串
            reader.readAsDataURL(file);
            reader.onload = (e) => {
                // 图片转成base64
				const code = e.target.result;
                this.newImgBase64.push(code);  
            };
            return false;
		},
		deleteImg(index) {
			this.newImgBase64.splice(index, 1);
		}