在vue框架中：
https://mp.weixin.qq.com/s/o_D_9Q95P9dFyr6PtYxDxw
在mako框架中：

<%inherit file="/base.html"/>

<%block name="content">
<div id="app">
    <input type="file" multiple id="imgLocal" accept="image/*" @change="fileChange"/>
    <img src="" height="200" alt="Image preview..." id="img1">
</div>
</%block>
<script>
    Vue.prototype.$http = axios;
    Vue.use(iview);
    new Vue({
        el: '#app',
        data() {
            return {}
        },
        methods: {
            fileChange() {
                let fileList = document.querySelector('#imgLocal').files
                // console.log(fileList) // files
                let file = fileList[0]
                // --------------使用FileReader圖片預(yù)覽--------------
                const fileReader = new FileReader()
                fileReader.readAsDataURL(file) //讀取圖片
                fileReader.addEventListener('load', function () {
                    // 讀取完成
                    let res = fileReader.result
                    // res是base64格式的圖片
                    // console.log(res)
                    // 將DOM上img的src設(shè)為讀取的結(jié)果即可實現(xiàn)預(yù)覽功能。
                    document.getElementById("img1").src = res
                })
                // --------------------------------------------------
                const formDate = new FormData()
                // formDate使用append方法時第一個參數(shù)是后端取值用的
                formDate.append('file', file, file.name)
                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
                axios.post('${SITE_URL}uploads/transfer/', formDate, config).then(res => {
                    if (res.data.result) {
                        alert('上傳成功，路徑為：' + res.data.data.Path)
                    } else {
                        this.$Message.error(res.data.data.message)
                    }
                })
            },
        },
        mounted() {
        
        }
    })
</script>
<style></style>