Uploader

图片上传使用演示

---

预览:

代码:

<template>
    <div>
        <span style="color: darkred" ref="error"></span>
        <g-uploader
                name="file"
                action="https://node-server-uploadtest.herokuapp.com/upload"
                :parse-response="parseResponse"
                :file-list.sync="fileList"
                @error="doError($event)"
                :limit-size="3*1024*1024">
            <g-button icon="upload">上传</g-button>
        </g-uploader>
    </div>
</template>
<script>
    export default {
        components: {GUploader, GButton},
        data() {
            return {fileList: []}
        },
        methods: {
            parseResponse(res) {
                let fileName = JSON.parse(res).id
                return `https://node-server-uploadtest.herokuapp.com/preview/${fileName}`
            },
            doError(e) {
                this.$refs.error.innerText = e
            },
        }
    }
</script>

API

Uploader

参数	说明	类型	默认值
name	与请求服务器约定好的filename。(必填)	String	无
action	图片上传地址。(必填)	String	无
method	图片上传方式。'POST'、'GET'	String	POST
parseResponse	图片上传服务器后得到返回结果回调函数parseResponse(response)，返回图片地址。 (必填)	Function	无
fileList	图片信息列表，包含字段：{"name"图片名、"size"图片大小、"type"图片类型、"status"图片上传状态}	Array	[]
limitSize	上传图片大小限制。（单位：字节(b)）	Number	无