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 是博主後端給出的檔案下載介面。
相關文章
- vue圖片預覽上傳Vue
- js圖片上傳預覽JS
- 短視訊平臺開發,圖片上傳和圖片預覽功能實現
- 自定義上傳圖片拼圖遊戲遊戲
- Typora中自定義命令上傳圖片
- FileReader()讀取檔案、圖片上傳預覽
- WebView自定義長按圖片功能WebView
- FileReader初步使用實現上傳圖片預覽效果
- SpringMVC實現ajax上傳圖片實時預覽SpringMVC
- Java上傳檔案到遠端伺服器和瀏覽器預覽圖片Java伺服器瀏覽器
- input上傳圖片怎樣觸發預設拍照功能?
- AntD框架的upload元件上傳圖片時使用customRequest方法自定義上傳行為框架元件
- js上傳圖片預覽,相容IE6以上各大主流瀏覽器JS瀏覽器
- 直播電商平臺開發,釋出多圖片上傳到伺服器並實現圖片預覽功能伺服器
- 自定義檔案上傳功能實現方法
- vue 本地預覽多圖上傳Vue
- uniapp實戰——完成圖片的預覽功能APP
- 前端實現圖片上傳預覽並轉換base64前端
- 文件預覽功能使用技巧(4)—圖片水印
- node+express實現圖片上傳功能Express
- ie8上傳本地圖片檔案轉base64 並預覽地圖
- UNI-APP專案模板《自定義TabBar》《上傳圖片》《全域性自定義loading》等功能 主要適配 微信小程式、APP、H5。APPtabBar微信小程式H5
- 上傳圖片
- 短視訊平臺原始碼,自定義上傳有邊框的背景圖片原始碼
- 直播帶貨原始碼,二次封裝a-upload元件,自定義上傳預覽原始碼封裝元件
- Vue富文字帶圖片修改圖片大小自定義選擇項自定義字型Vue自定義字型
- html input type=file 選擇圖片,圖片預覽 純html js實現圖片預覽HTMLJS
- 圖片預覽元件PhotoView元件View
- 配置Django-TinyMCE元件支援上傳圖片功能Django元件
- Laravel- 圖片上傳新增自動裁剪功能Laravel
- 6.自定義圖片剪下
- 前端奇淫技術:圖片壓縮、方向糾正、預覽、上傳外掛前端
- [Laravel Admin] 檔案 / 圖片上傳功能之擴充套件 -- 上傳新圖且保留原圖Laravel套件
- 上傳圖片jsJS
- 裁剪上傳圖片
- electron上傳圖片
- 圖片上傳及圖片處理
- (H5)canvas實現裁剪圖片和馬賽克功能,以及又拍雲上傳圖片H5Canvas