Ant-Design-Vue 自定義上傳和圖檔預覽功能

前端頁面代碼部分

<template>
    <a-upload list-type="picture-card" :customRequest="imgAdd" :remove="imgDel"
              :file-list="fileList" @preview="handlePreview" @change="handleChange">
        <div v-if="fileList.length < 9">
            <a-icon type="plus" />
            <div class="ant-upload-text">
                上傳
            </div>
        </div>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
        <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
</template>

<script>
    import {
        uploadFile // 封裝了上傳檔案接口
    } from "../../api/file";
    
    // function getBase64(file) {
    //     return new Promise((resolve, reject) => {
    //         const reader = new FileReader();
    //         reader.readAsDataURL(file);
    //         reader.onload = () => resolve(reader.result);
    //         reader.onerror = error => reject(error);
    //     });
    // }
    
    export default {
        data() {
            return {
                previewVisible: false,
                previewImage: '',
                fileList: [],
            }
        },
        methods: {
            // 上傳圖檔
            imgAdd(data) {
                let formdata = new FormData()
                formdata.append('file', data.file)
                uploadFile(formdata).then(res => {
                    if (res.code === 200) { // 上傳成功時（自己封裝了response）
                        data.onSuccess(res.data);
                    }else {
                        data.onError();
                    }
                })
            },
            // 删除圖檔
            imgDel(file) {
                this.fileList.splice(this.fileList.indexOf(file), 1);
            },
            // 關閉模态框
            handleCancel() {
                this.previewVisible = false;
            },
            // 打開模态框（圖檔預覽）
            async handlePreview(file) {
                console.log(file);
                // if (!file.url && !file.preview) {
                //     file.preview = await getBase64(file.originFileObj);
                // }
                // this.previewImage = file.url || file.preview;
                this.previewImage = file.response.path;
                this.previewVisible = true;
            },
            // 修改檔案？沒用到
            handleChange({
                fileList
            }) {
                this.fileList = fileList;
            },
        }
    }
</script>
           

各功能介紹

一、自定義上傳（:customRequest=“imgAdd”）

上傳中成功時必須執行 data.onSuccess() ，這樣才能讓正在上傳的圖檔呈現為上傳成功狀态，不然會一直顯示在上傳中。

該方法可以添加 請求接口的response 為參數，

這樣可以設定 fileList 中檔案的 response ：

除了 onSuccess() 方法外，還有 onError() 方法，該方法使上傳的圖檔呈現為上傳失敗狀态。還有 onProcess() 方法，但是部落客沒有試出來它的用處。

二、圖檔預覽

部落客注釋的兩個部分是第一種圖檔加載方法，采用 Base64 的加載方法，加載“本地檔案”。

第二種方法是加載圖檔的 url ，該 url 是部落客後端給出的檔案下載下傳接口。