Vue 图片上传功能

Vue 图片上传功能，自定义上传

限制上传类型 & 多选：
① accept 属性只能与 配合使用。它规定能够通过文件上传进行提交的文件类型。
② multiple 属性规定输入字段可选择多个值。

<!-- image/* 所有图片 image/png png图片 image/jpg jpg图片 image/gif gir动图 application/msword Word文档（.doc） application/vnd.openxmlformats-officedocument.wordprocessingml.document Word文档（.docx） application/vnd.ms-excel Excel文档（.xls） application/vnd.openxmlformats-officedocument.spreadsheetml.sheet Excel文档（.xlsx） application/vnd.ms-powerpoint PPT文档（.ppt） application/vnd.openxmlformats-officedocument.presentationml.presentation PPT文档（.pptx） application/zip 压缩文件 text/plain 文本文件 text/html HTML文件 text/css css文件 application/pdf pdf文件 audio/* 音频文件 video/* 视频文件 -->
  <input class="uploadInput" type="file" accept="image/*, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation, application/zip, text/plain, text/html, text/css, application/pdf, audio/*, video/*" multiple />

<div class="uploadbox">
	<!-- 上传前 -->
    <div class="upload" v-if="showImg">
        <input type="file" accept="image/*,application/pdf," ref="fileInt" class="uploadInput" @change="changeHide">
        <i class="el-icon-plus"></i>
    </div>
    <!-- 上传预览 -->
   <div class="upload" v-else>
   		<!-- 上传预览后更改 -->
        <input type="file" ref="fileInt" class="uploadInput" @change="changeHide">
        <img :src="imageUrl" alt="">
    </div>
</div>

export default { 
   
	 data() { 
   
			return { 
   
				imageUrl: '',
				showImg: true,
				
			}
	},
	 methods: { 
   
	 	const file = this.$refs.fileInt.files[0];
	 	const formData = new FormData()
	 	formData.append('file', file)
	 	this.$axios.post(`${ 
     this.$Tools.Conts.domain}uploads`, formData).then(res => { 
   
	 		if (res.data.code == 0) { 
   
	 			//开启图片预览
	 			this.showImg = false
	 			console.log(res.data.data)
	 		}
	 	}
	 }
}

        // 上传 .uploadbox { 
   
            width: 100%; .upload { 
   
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                font-size: 28px;
                position: relative;
                overflow: hidden;
                cursor: pointer; img { 
   
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

                .uploadInput { 
   
                    border: 1px solid red;
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    opacity: 0;
                    cursor: pointer;
                }
            }

            .upload:hover { 
   
                border-color: #409EFF;
                cursor: pointer;
            }
        }

今天的文章Vue 图片上传功能分享到此就结束了，感谢您的阅读。