add uploadfile

@@ -8,7 +8,7 @@ class ResourceApi extends Api {
   info(id) {
     return this._post('/ufoPlatform/resource/getResourceInfo', {
       id
-    }, true);
+    });
   }
 
   editResource(data) {

@@ -72,7 +72,7 @@
 
 <script>
 
-import fileUpload from './file-upload';
+import fileUpload from './drag-file-upload';
 
 export default {
   props: {

+<template>
+    <div v-if="show">
+        <image-purview
+            v-if="uploadList[0]"
+            :status="uploadList[0].status"
+            :url="uploadList[0].url"
+            :progress="uploadList[0].showProgress"
+            :percentage="uploadList[0].percentage"
+            :remove="true"
+            @remove-image="handleRemove"></image-purview>
+
+        <div class="upload-box"  v-show="!uploadList[0]">
+            <Upload ref="upload"
+                    :show-upload-list="false"
+                    :data="{bucket: bucket}"
+                    :on-success="handleSuccess"
+                    :on-error="handleError"
+                    :default-file-list="defaultList"
+                    :format="['jpg','jpeg','png']"
+                    :max-size="2048"
+                    :on-format-error="handleFormatError"
+                    :on-exceeded-size="handleMaxSize"
+                    action="/ufoPlatform/fileupload/upload?debug=XYZ">
+                <Icon type="ios-cloud-upload-outline" title="上传图片"></Icon>
+            </Upload>
+        </div>
+    </div>
+</template>
+<script>
+
+import imagePurview from './image-purview'
+
+export default {
+    name: 'drag-file-upload',
+    props: {
+        defaultFile: {
+            type: String
+        },
+        bucket: {
+            type: String,
+            default() {
+                return 'yhb-img01';
+            }
+        }
+    },
+    data() {
+        let _this = this;
+
+        return {
+            imgUrl: '',
+            show: true,
+            visible: false,
+            uploadList: [],
+            defaultList: _this.defaultFile ? [{url: _this.defaultFile}] : []
+        };
+    },
+    methods: {
+        handleView(url) {
+            this.imgUrl = url;
+            this.visible = true;
+        },
+        handleRemove() {
+            let file = this.uploadList[0];
+            let files = this.$refs.upload.fileList;
+
+            this.$refs.upload.fileList.splice(files.indexOf(file), 1);
+            this.uploadList = this.$refs.upload.fileList;
+            this.$emit('remove', this.id);
+        },
+        handleSuccess(response, file, files) {
+            if (response.data) {
+                file.url = response.data.imagesList[0];
+            }
+
+            this.uploadList = files;
+            this.$emit('success', this.id, file);
+        },
+        handleError() {
+            this.$Notice.error('上传失败');
+            this.$emit('error', this.id);
+        },
+        handleFormatError(file) {
+            this.$Notice.warning({
+                title: '文件格式不正确',
+                desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
+            });
+        },
+        handleMaxSize(file) {
+            this.$Notice.warning({
+                title: '超出文件大小限制',
+                desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
+            });
+        },
+        selected(url) {
+            this.uploadList = this.defaultList = [{url}];
+            this.$emit('success', this.id, {url});
+        },
+
+    },
+    mounted() {
+        this.uploadList = this.$refs.upload.fileList;
+    },
+    watch: {
+        defaultFile: function(newValue) {
+            if (newValue) {
+                this.defaultList = [{url: newValue}];
+            }
+        }
+    },
+    components: {
+        imagePurview
+    }
+};
+</script>
+<style lang="scss">
+
+.upload-box {
+    width: 100px;
+    height: 100px;
+    background: #fff;
+    border: 1px dashed #dddee1;
+    border-radius: 4px;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    transition: border-color 0.2s ease;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+        border-color: #2d8cf0;
+    }
+
+    .ivu-upload {
+        height: 30px;
+    }
+
+    .ivu-icon {
+        font-size: 30px;
+        margin: 0 2px;
+        color: #000;
+        transition: color 0.2s ease;
+
+        &:hover {
+            color: #2d8cf0;
+        }
+    }
+}
+</style>

@@ -20,7 +20,7 @@ export default {
     props: {
         action: {
             type: String,
-            default: '/ufoPlatform/fileupload/uploadImage'
+            default: '/ufoPlatform/fileupload/upload?debug=XYZ'
         },
         data: {
             type: Object,

+<template>
+    <div class="image-purview">
+        <template v-if="status === 'finished' || url">
+            <img :src="url">
+            <div class="image-purview-cover">
+                <Icon type="ios-eye-outline" size="30" @click.native="purviewImage"></Icon>
+                <Icon type="ios-trash-outline" v-if="remove" size="30" @click.native="removeImage"></Icon>
+            </div>
+        </template>
+        <template v-else>
+            <Progress v-if="progress" :percent="percentage" hide-info></Progress>
+        </template>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'image-purview',
+    props: {
+        status: {
+            type: String,
+            default: 'finished'
+        },
+        url: {
+            type: String,
+        },
+        progress: {
+            type: Boolean,
+            default: false,
+        },
+        percentage: {
+            type: Number,
+        },
+        remove: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            showModal: false
+        };
+    },
+    methods: {
+        purviewImage() {
+            this.showModal = true;
+            this.$emit('purview', this.url);
+        },
+        removeImage() {
+            this.$emit('remove-image', this.url);
+        }
+    },
+};
+</script>
+
+<style lang="scss">
+.image-purview {
+    margin: 0 auto;
+    width: 100px;
+    height: 100px;
+    text-align: center;
+    border-radius: 4px;
+    overflow: hidden;
+    background: #fff;
+    position: relative;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+    border: 1px solid #e8e8e8;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+
+    .ivu-progress {
+        width: 90%;
+    }
+}
+
+.image-purview img {
+    width: 100px;
+    height: 100px;
+}
+
+.image-purview-cover {
+    display: none;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.6);
+    align-items: center;
+    justify-content: center;
+}
+
+.image-purview:hover .image-purview-cover {
+    display: flex;
+}
+
+.image-purview-cover i {
+    color: #fff;
+    font-size: 20px;
+    cursor: pointer;
+    margin: 0 2px;
+}
+</style>