ant-design-vue 之upload 文件上傳

01) 單文件上傳

使用  :before-upload="beforeUpload"  和  @change="handleChange"

<template>
    <div>
        
        <div> 圖片名字: {{imgName}}</div> <br /><br /><br />
        
        <a-upload
                name="file"
                :multiple="true"
                :before-upload="beforeUpload"
                :file-list="fileList"
                @change="handleChange">
            <a-button> <a-icon type="upload" /> Click to Upload </a-button>
        </a-upload>
    </div>
</template>
<script>
    
    /* 這是ant-design-vue */
    import Vue from 'vue'
    import Antd, { message,Select } from 'ant-design-vue'  //這是ant-design-vue
    import 'ant-design-vue/dist/antd.css'
    Vue.use(Antd);
    /* 這是ant-design-vue */

    
    export default {
        components:{},
        data() {
            return {
                imgName: "",
                fileStatus: true,
                fileList: [],
            }
        },
        methods: {
            
            beforeUpload(file) {
                if (file.type !== 'image/jpeg') {
                    this.fileStatus = false;
                    this.$message.error('只能上傳 JPG 格式');
                }
                this.imgName = file.name;
                // 禁用原來上傳,改用自定義上傳,[ 必須返回false,才能在handleChange使用自己的請求方式]
                return false; 
            },
            handleChange(info) {
                if (this.fileStatus) {
                    // 開始上傳
                    let fileList = [...info.fileList];
                    const formData = new FormData();
                    formData.append("file", fileList[0].originFileObj);

                    // this.$post("上傳URL地址", formData).then(resUpLoadFiles => {
                    //     console.log(resUpLoadFiles);
                    // })
                    fileList = fileList.map(file => {
                        file.url = "https://www.cnblogs.com/images/jblogo.png";
                        return file;
                    });
                    this.fileList = fileList;
                }
            },
        },
    };
</script>

<style scoped>
 
</style>