使用Vue3實現一個Upload元件的示例程式碼
阿新 • • 發佈：2021-05-06
通用上傳元件開發
開發上傳元件前我們需要了解：
- FormData上傳檔案所需API
- dragOver檔案拖拽到區域時觸發
- dragLeave 檔案離開拖動區域
- drop檔案移動到有效目標時
首先實現一個最基本的上傳流程：
基本上傳流程，點選按鈕選擇，完成上傳
程式碼如下：
<template>
<div class="app-container">
<!--使用change事件-->
<input type="file" @change="handleFileChange">
</div>
</template>
<script lang="ts">
import { defineComponent } from ' 結果如下：
到這裡我們基本的上傳已經處理完成了，相對來說還是比較簡單的，接下來我們建立Uploader.vue檔案用來封裝Upload元件。
我們需要實現如下功能
自定義模版
我們知道使用<input type="file">系統自帶樣式比較難看所用我們需要如下處理：
- 對樣式進行優化，隱藏input
- 點選<div class="upload-area" @click="triggerUpload"></div>使用js出發input的click事件
- 處理上傳狀態
程式碼如下：
<template>
<div class="file-upload">
<div class="upload-area" @click="triggerUpload"></div>
<span v-if="fileStatus==='loading'">正在上傳</span>
<span v-else-if="fileStatus==='success'">上傳成功</span>
<span v-else-if="fileStatus==='error'">上傳失敗</span>
<span v-else>點選上傳</span>
<input ref="fileInput" type="file" name="file" style="display: none" />
</div>
</template>
<script lang="ts">
import { computed,defineComponent,PropType,reactive,ref } from 'vue'
import axios from 'axios'
type UploadStatus = 'ready' | 'loading' | 'success' | 'error'
export default defineComponent({
props: {
action: { // url地址
type: String,required: true
}
},setup(props) {
// input例項物件，通過與ref="fileInput"的關聯獲取到input例項物件
const fileInput = ref<null | HTMLInputElement>(null)
const fileStatus = ref<UploadStatus>('ready')
// 1.div點選事件
const triggerUpload = () => {
if(fileInput.value) {
fileInput.value.click()
}
}
// 通過div來觸發input的change事件
const handleFileChange = (e: Event) => {
const target = e.target as HTMLInputElement
const files = target.files
if(files) {
const uploadedFile = files[0]
const formData = new FormData()
formData.append('file',uploadedFile)
readyFile.status = 'loading' // 上傳之前將狀態設定為loading
axios.post(props.actions,{
headers: {
"Content-Type": 'multipart/form-data'
}
}).then(resp=> {
console.log('resp',resp)
readyFile.status = 'success' // 上傳成功將狀態設定為success
}).catch(error=> {
readyFile.status = 'error' // // 上傳失敗將狀態設定為error
})
}
}
return {
fileInput,triggerUpload,handleFileChange,fileStatus
}
}
})
</script>
現在我們已經完成了對上傳元件樣式的優化，和上傳狀態的處理，接下來我們需要處理檔案上傳列表
支援檔案上傳列表
處理檔案上傳列表我們需要有如下實現：
- 顯示檔名稱
- 狀態
- 可刪除
- 顯示上傳進度
- 有可能有更豐富的顯示
在上一步程式碼的基礎上做一些修改：
<template>
<div class="file-upload">
<div class="upload-area" @click="triggerUpload"></div>
<!-- 點選上傳態 -->
<slot v-if="isUploading" name='loading'>
<button disabled>正在上傳</button>
</slot>
<!-- 上傳完畢態 -->
<slot name="uploaded" v-else-if="lastFileData && lastFileData.loaded" :uploadData="lastFileData.data">
<button disabled>點選上傳</button>
</slot>
<!-- 預設態 -->
<slot v-else name='default'>
<!-- <button disabled>點選上傳</button> -->
<span>點選上傳</span>
</slot>
<input ref="fileInput" type="file" name="file" style="display: none" />
<!--展示fileList-->
<ul>
<li
v-for="file in filesList"
:key="file.uid"
:class="`uploaded-file upload-${file.status}`"
>
<span class="filname">
{{ file.name }}
</span>
<button class="delete-icon" @click="reomveFile(file.uid)">Del</button>
</li>
</ul>
</div>
</template>
<script lang="ts">
import { last } from 'lodash-es'
import { v4 as uuidv4 } from 'uuid';
// 定義上傳狀態
type UploadStatus = 'ready' | 'loading' | 'success' | 'error'
// step1 定義上傳檔案物件介面類
export interface UploadFile {
uid: string; // 檔案唯一id
size: number; // 檔案大小
name: string; // 檔名稱
status: UploadStatus; // 上傳狀態
raw: File; // 檔案
progress?: string; // 檔案上傳進度
resp?: any; // 服務端返回資料
url?: string // 對應展示的url
}
export default defineComponent({
props: {
action: { // url地址
type: String,setup(props) {
// input例項物件，通過與ref="fileInput"的關聯獲取到input例項物件
const fileInput = ref<null | HTMLInputElement>(null)
// step2 上傳檔案列表
const filesList = ref<UploadFile[]>([])
// step4-1 判斷是否正在上傳中
const isUploading = computed(()=> {
return filesList.value.some((file)=>file.status==='loading')
})
//step4-2 獲取上傳檔案的最後一項
const lastFileData = computed(()=>{
const lastFile = last(filesList.value)
if(!lastFile) return false
return {
loaded: lastFile?.status === 'success',data: lastFile?.resp
}
})
// 1.div點選事件
const triggerUpload = () => {
if(fileInput.value) {
fileInput.value.click()
}
}
// 通過div來觸發input的change事件
const handleFileChange = (e: Event) => {
const target = e.target as HTMLInputElement
const files = target.files
www.cppcns.com if(files) {
const uploadedFile = files[0]
const formData = new FormData()
formData.append('file',uploadedFile)
// step3 設定響應式物件，儲存到filesList中，以便在頁面中展示
const fileObj = reactive<UploadFile>({
uid: uuid(); // 檔案唯一id
size: uploadedFile.size,name: uploadedFile.name,status: 'loading',raw: uploadedFile
})
filesList.value.push(fileObj)
axios.post(props.actions,{
headers: {
"Content-Type": 'multipart/form-data'
},//step6 處理上傳進度
onUploadProgress: (progressEvent)=> {
const complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
fileObj.progress = complete
}
}).then(resp=> {
console.log('resp',resp)
fileObj.status = 'success'
}).catch(error=> {
fileObj.status = 'error'
}).finally(()=> {
// 一張圖片重複上傳時無法繼續上傳bug
if(fileInput.value) {
fileInput.value.value = ''
}
})
}
}
// step7 處理刪除
const reomveFile = (uid: string) => {
filesList.value = filesList.value.filter(file=>file.uid!==uid)
}
return {
fileInput,fileStatus,isUploading,filesList,lastFileData
}
}
})
</script>
- 首先我們定義上傳檔案物件介面類UploadFile
- 建立了一個filesList響應式物件
- 去掉了fileStatus，因為在UploadFile介面中我們已經有定義status
- 修改模版中的狀態，利用computed來判讀是否是處於上傳狀態，並增加slot進行自定義
- 展示上傳的圖片
- 處理上傳進度
- 處理刪除
注意點：如果選擇相同的圖片不會進行上傳操作，因為我們使用的是input的change事件，所以我們需要在上傳後將inpuwww.cppcns.comt的value設定為null
支援一系列生命週期鉤子事件，上傳事件
beforeUpload
<template>
...
</template>
<script lang="ts">
import { last } from 'lodash-es'
import { v4 as uuidv4 } from 'uuid';
// 定義上傳狀態
type UploadStatus = 'ready' | 'loading' | 'success' | 'error'
// 定義上傳檔案為boolean或promsie且接受一個File
type CheckUpload = ()=> boolean | Promise<File>
export interface UploadFile {
...
}
export default defineComponent({
props: {
action: { // url地址
type: String,required: true
},beforeUpload: {
type: Function as PropType<CheckUpload>
}
},setup(props) {
const fileInput = ref<null | HTMLInputElement>(null)
const filesList = ref<UploadFile[]>([])
// step4-1 判斷是否正在上傳中
const isUploading = computed(()=> {
return filesList.value.some((file)=>file.status==='loading')
})
const lastFileData = computed(()=>{
const lastFile = last(filesList.value)
if(!lastFile) return false
return {
loaded: lastFile?.status === 'success',data: lastFile?.resp
}
})
const triggerUpload = () => {
if(fileInput.value) {
fileInput.value.click()
}
}
const handleFileChange = (e: Event) => {
const target = e.target as HTMLInputElement
const files = target.files
const uploadedFile = files[0]
if(props.beforeUpload) {
const result = props.beforeUpload(uploadedFile)
if(result && result instanceof Promise) {
result.then((processFile)=> {
if(uploadedFile instanceof File) {
postFile(uploadedFile)
}
}).catch(error=>{
console.error(error)
})
} esle if(result===true) {
postFile(uploadedFile)
}
}else{
postFile(uploadedFile)
}
}
const reomveFile = (uid: string) => {
filesList.value = filesList.value.filter(file=>file.uid!==uid)
}
// 處理檔案上傳
const postFile = (readyFile:UploadFile)=> {
const formData = new FormData()
formData.append('file',readyFile.raw)
readyFile.status = 'loading'
axios.post(props.action,{
headers: {
"Content-Type": 'multipart/form-data'
},onUploadProgress: (progressEvent)=> {
const complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
// console.log('上傳 ' + complete)
readyFile.progress = complete
}
},).then(resp=> {
console.log('resp',resp)
// fileStatus.value = 'success'
readyFile.status = 'success'
readyFile.resp = resp.data
}).catch(error=> {
// fileStatus.value = 'error'
readyFile.status = 'error'
})
.finally(()=> {
// 一張圖片重複上傳時無法繼續上傳bug
if(fileInput.value) {
fileInput.value.value = ''
}
})
}
return {
fileInput,filesList程式設計客棧,lastFileData
}
}
})
</script>
實現步驟：
- 在poops處定義屬性beforeUpload，同時定義上傳檔案為boolean或promsie且接受一個File
- 將原上傳方法進行封裝為postFile
- 根據beforeUpload返回結果，進行接下來的流程處理
onProgress，onSuccess，onError，onChange與之類似
拖拽支援
大致流程如下圖：
- dragover和dragleave新增和刪除對應的class
- drop拿到正在被拖拽的檔案，刪除class，並且觸發上傳
- 只有在屬性drag為true才能觸發
需要注意v-on的使用具體可參考vue官方文件
上程式碼：
<template>
<div class="file-upload">
<div
:class="['upload-area',drag && isDragOver ? 'is-dragover': '' ]"
v-on="events"
>
<!-- 點選上傳態 -->
<slot v-if="isUploading" name='loading'>
<button disabled>正在上傳</button>
</slot>
<!-- 上傳完畢態 -->
<slot name="uploaded" v-else-if="lastFileData && lastFileData.loaded" :uploadData="lastFileData.data">
<button disabled>點選上傳</button>
</slot>
<!-- 預設態 -->
<slot v-else name='default'>
<!-- <button disabled>點選上傳</button> -->
<span>點選上傳</span>
</slot>
</div>
<input ref="fileInput" type="file" name="file" style="display: none" @change="handleFileChange" />
<ul>
<li
v-for="file in filesList"
:key="file.uid"
:class="`uploaded-file upload-${file.status}`"
>
<img
v-if="file.url && listType === 'picture'"
class="upload-list-thumbnail"
:src="file.url"
:alt="file.name"
>
<span class="filname">
{{ file.name }}
</span>
<span class="progress">
{{ file.progress }}
</span>
<button class="delete-icon" @click="reomveFile(file.uid)">Del</button>
</li>
</ul>
</div>
</template>
<script lang="ts">
import { computed,ref } from 'vue'
import axios from 'axios'
import { v4 as uuidv4 } from 'uuid';
import { last } from 'lodash-es'
type UploadStatus = 'ready' | 'loading' | 'success' | 'error'
type fileListType = 'text' | 'picture'
type CheckUpload = ()=> boolean | Promise<File>
export interface UploadFile {
uid: string; // 檔案唯一id
size: number; // 檔案大小
name: string; // 檔名稱
status: UploadStatus; // 上傳狀態
raw: File; // 檔案
progress?: string;
resp?: any; // 服務端返回資料
url?: string // 對應展示的url
}
// dragOver 檔案拖拽到區域時觸發
// dragLeave 檔案離開拖動區域
// drop 事件拿到正在被拖拽的檔案刪除class並且觸發上傳
// 只有設定drag的時候才有效
export default defineComponent({
name: 'Uploader',props: {
action: { // url地址
type: String,required: true
},beofreUpload:{ // 上傳之前的處理
type: Function as PropType<CheckUpload>
},drag: { // 是否拖拽
type: Boolean,default: false
},autoUpload: { // 自動上傳
type: Boolean,default: true
},listType: {
type: String as PropType<fileListType>,default: 'text'
}
},setup(props) {
const fileInput = ref<null | HTMLInputElement>(null)
const fileStatus = ref<UploadStatus>('ready')
// 儲存上傳的檔案
const filesList = ref<UploadFile[]>([])
// 定義了一個isDragOver標識，處理拖動後樣式.upload-area顯示
const isDragOver = ref<boolean>(false)
const triggerUpload = () => {
if(fileInput.value) {
fileInput.value.click()
}
}
let events: {[key:string]: (e: any)=>void} = {
'click': triggerUpload,}
// 只要有一個檔案狀態是loading態就說明是正在上傳
const isUploading = computed(()=>{
return filesList.value.some((file)=> file.status==='loading')
})
// 獲取上傳檔案的最後一項
const lastFileData = computed(()=>{
const lastFile = last(filesList.value)
if(!lastFile) return false
return {
loaded: lastFile?.status === 'success',data: lastFile?.resp
}
})
// 處理dragover，dragleave
const handleDrag = (e: DragEvent,over: boolean)=> {
// 阻止預設事件
e.preventDefault()
// dragover為true，dragleave為fasle
isDragOver.value = over
}
// 處理drop
const handleDrop = (e: DragEvent) => {
e.preventDefault()
isDragOver.value = false
if(e.dataTransfer) {
beforeUploadCheck(e.dataTransfer.files)
}
}
if(props.drag){
events = {
...events,'dragover': (e: DragEvent) => { handleDrag(e,true)},'dragleave': (e: DragEvent) => { handleDrag(e,false)},'drop': handleDrop
}
// console.log(events)
}
// 刪除檔案
const reomveFile = (uid: string)=> {
filesList.value = filesList.value.filter(file=>file.uid!==uid)
}
const postFile = (readyFile:UploadFile) => {
const formData = new FormData()
formData.append('file',readyFile.raw)
readyFile.status = 'loading'
// 選擇檔案後push到儲存物件裡面
axios.post(props.action,resp)
// fileStatus.value = 'success'
readyFile.status = 'success'
readyFile.resp = resp.data
}).catch(error=> {
// fileStatus.value = 'error'
readyFile.status = 'error'
})
.finally(()=> {
// 一張圖片重複上傳時無法繼續上傳bug
if(fileInput.value) {
fileInput.value.value = ''
}
})
}
const addFileToList = (uploadedFile: File) => {
const fileObj = reactive<UploadFile>({
uid: uuidv4(),size: uploadedFile.size,status: 'ready',raw: uploadedFile
})
// 處理圖片格式並顯示
if(props.listType==='picture') {
// try {
// fileObj.url = URL.createObjectURL(uploadedFile)
// }catch(err) {
// console.error('upload file err',err)
// }
const fileReader = new FileReader()
fileReader.readAsDataURL(uploadedFile)
fileReader.addEventListener('load',()=> {
fileObj.url = fileReader.result as string
})
}
filesList.value.push(fileObj)
if(props.autoUpload) {
postFile(fileObj)
}
}
const uploadFiles = ()=> {
// filesList.value.filter(file => file.status === 'ready').forEach(readyFile => postFile(readyFile))
filesList.value.filter(file => file.status === 'ready').forEach(readyFile=>postFile(readyFile))
}
const beforeUploadCheck = (files: null | FileList ) => {
if(files) {
fileStatus.value = 'loading'
const uploadedFile = files[0]
if(props.beofreUpload) {
const result = props.beofreUpload()
// 如果有返回值
if(result && result instanceof Promise) {
result.then(processedFile=> {
if(processedFile instanceof File) {
addFileToList(processedFile)
} else {
throw new Error('beforeUpload promise should return file object')
}
}).catch(err=> {
console.log(err)
})
} else if(result === true) {
addFileToList(uploadedFile)
}
} else {
addFileToList(uploadedFile)
}
}
}
const handleFileChange = (e: Event) => {
const target = e.target as HTMLInputElement
const files = target.files
beforeUploadCheck(files)
}
return {
fileInput,reomveFile,lastFileData,beforeUploadCheck,程式設計客棧 isDragOver,events
}
}
})
</script>
以上就是基本的基於vue3實現的上傳通用元件
另附上上傳介面程式碼：
// 引入模組
const Koa = require('koa');
const fs = require('fs');
const path = require('path');
const router = require('koa-router')();
const koaBody = require('koa-body');
const static = require('koa-static');
const cors = require('koa2-cors')
// 例項化
const app = new Koa();
app.use(koaBody({
multipart: true,// 支援檔案上傳
formidable: {
maxFieldsSize: 2 * 1024 * 1024,// 最大檔案為2兆
multipart: true // 是否支援 multipart-formdate 的表單
}
}));
const uploadUrl = "http://localhost:3001/static/upload";
// 配置路由
router.get('/',(ctx) => {
// 設定頭型別,如果不設定，會直接下載該頁面
ctx.type = 'html';
// 讀取檔案
const pathUrl = path.join(__dirname,'/static/upload.html');
ctx.body = fs.createReadStream(pathUrl);
});
// 上傳檔案
router.post('/upload',(ctx) => {
// 獲取上傳檔案
const file = ctx.request.files.file;
console.log(file);
// 讀取檔案流
const fileReader = fs.createReadStream(file.path);
// 設定檔案儲存路徑
const filePath = path.join(__dirname,'/static/upload/');
// 組裝成絕對路徑
const fileResource = filePath + `/${file.name}`;
/**
* 使用 createWriteStream 寫入資料，然後使用管道流pipe拼接
*/
const writeStream = fs.createWriteStream(fileResource);
// 判斷 /static/upload 資料夾是否存在，如果不在的話就建立一個
if (!fs.existsSync(filePath)) {
fs.mkdir(filePath,(err) => {
if (err) {
throw new Error(err);
} else {
fileReader.pipe(writeStream);
ctx.body = {
url: uploadUrl + `/${file.name}`,code: 0,message: '上傳成功1'
};
}
});
} else {
fileReader.pipe(writeStream);
ctx.body = {
url: uploadUrl + `/${file.name}`,message: '上傳成功1'
};
}
});
// 配置靜態資源路徑
app.use(static(path.join(__dirname)));
// 開啟跨域
app.use(cors())
// 啟動路qjAJCnB由
app.use(router.routes()).use(router.allowedMethods());
// 監聽埠號
app.listen(3001,() => {
console.log('server is listen in 3001');
});
寫在最後
已上只是一個簡單的實現，當然了我們也可以新增自定義headers，自定義傳遞資料data，accecpt等等
到此這篇關於使用Vue3實現一個Upload元件的示例程式碼的文章就介紹到這了,更多相關Vue3 Upload元件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！