前端頁面代碼部分
<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 是部落客後端給出的檔案下載下傳接口。