upload

Author: MillerRen

src/components/Uploader/index.vue

@@ -1,8 +1,10 @@
 <template>
 <div class="component-uploader">
+  <slot></slot>
   <input type="file" name="file" @change="onChange($event)">
 </div>
 </template>
+
 <script>
 export default {
   props: {
@@ -30,4 +32,20 @@ export default {
   }
 }
 </script>
-<style></style>
+
+<style>
+.component-uploader {
+  position: relative;
+}
+
+.component-uploader input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0;
+  background: none;
+  cursor: pointer;
+}
+</style>

src/views/Account/Profile.vue

@@ -2,7 +2,9 @@
 <div class="view-profile container">
   <div class="col-sm-4 col-sm-offset-4">
     <img :src="src" alt="" class="img-responsive img-cycle">
-    <Uploader :url="url" @success="onUploadSuccess" @error="onUploadError"></Uploader>
+    <Uploader :url="url" @success="onUploadSuccess" @error="onUploadError">
+    	<button class="btn btn-default">上传</button>
+    </Uploader>
   </div>
 </div>
 </template>