iview的Upload 手動上傳

在項目開發中有時需要手動上傳圖片,而不是選取圖片後直接上傳,官方文檔給了個實例,但卻沒有給怎麼實際手動上傳的後續操作,直接上代碼

<template>
    <div>
        <Upload
        	ref="upload"
            :before-upload="handleUpload"
            action="//jsonplaceholder.typicode.com/posts/">
            <Button icon="ios-cloud-upload-outline">Select the file to upload</Button>
        </Upload>
        <div v-if="file !== null">Upload file: {{ file.name }} <Button type="text" @click="upload" :loading="loadingStatus">{{ loadingStatus ? 'Uploading' : 'Click to upload' }}</Button></div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                file: null,
                loadingStatus: false
            }
        },
        methods: {
            handleUpload (file) {
                this.file = file;
                return false;
            },
            upload () {
                this.loadingStatus = true;
                // 看這裏
                this.$refs.upload.post(this.file);
            },
            // 上傳成功
	        handleSuccess(res, file) {
	        		this.loadingStatus = false;
	          		this.file = null;
	                this.$Message.success("數據導入成功!");
	        },
        }
     }
</script>
發佈了23 篇原創文章 · 獲贊 13 · 訪問量 2009
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章