vue 圖片上傳功能

	<template>    
		<div class="file_box ">
			<span class='upload'>
				<input type="file" name="" id="" value="" name="saveFile" @change="tirggerFile($event)"/>
         	    <img :src="form.imgURL" alt="" />
				<i  v-show="!form.img" >新增圖片</i>
			</span>
        	<i class='title_dec' style="position: absolute;left: 4rem;top:3rem;">您可以上傳1張圖片</i>
		</div>
	</template>
 

	<script>
		 methods: {
		      tirggerFile (event) {
		        let self = this;
		        let file = event.target.files[0]
		        let param = new FormData() // 建立form物件
		        param.append('file', file, file.name) // 通過append向form物件新增資料
		        param.append('type', '1') // 新增form表單中其他資料
		        console.log(param.get('file')) // FormData私有類物件，訪問不到，可以通過get判斷值是否傳進去
		        let config = {
		          headers: {'Content-Type': 'multipart/form-data'}
		        }
		        // 新增請求頭
		        self.$openapi.$axios.post('upload/upImg', param, config)
		          .then(response => {
		            if (response.data.status == 200) {
		              self.form.img = response.data.data.img;
		              self.form.imgURL  ='http://www.baidu.com/'+response.data.data.img;
		            }
		          })
    		},
    	}
	</script>
 

<style>
		.upload[data-v-ddcf96a0] {
		    width: 3rem;
		    height: 3rem;
		    display: inline-block;
		    border-radius: 0.2rem;
		    position: relative;
		    margin-left: 1.12rem;
		    margin-top: 0.78rem;
		    background: #E5E5E5 url(‘1.png’) center center no-repeat;
		    background-size: 0.72rem 0.72rem;
		}
		.upload input{
		    position: absolute;
		    width: 3rem;
		    height: 3rem;
		    top: 0;
		    left: 0;
		    opacity: 0;
		}
		.file_box img{
			    width: 3rem;
			    height: 3rem;
			    line-height: 3rem;
			    display: block;
			    float: left;
			    border: 0.02rem solid #E5E5E5;
			}
			.upload i {
				    position: absolute;
				    bottom: 0.36rem;
				    left: 0.72rem;
				    color: #FFFFFF;
				    font-size: 0.4rem;
				}
</style>
 

效果圖