vue實現拖拽或點選上傳圖片
阿新 • • 發佈：2021-09-09
本文例項為大家分享了實現拖拽或點選上傳圖片的具體程式碼，供大家參考，具體內容如下
一、預覽圖
二、實現
點選上傳思路：將input的type設定為“file”型別即可上傳檔案。隱藏該input框，同時點選按鈕時，調取該input的點選上傳功能。剩下的就是優化頁面了。
拖拽上傳思路：通過給拖拽框dropbox繫結拖拽事件，當元件銷燬時解綁事件。在拖拽結束，通過event.dataTransfer.files獲取上傳的檔案資訊。然後在對檔案進行上傳伺服器操作。
接下來請允許我簡單介紹一下各個元件：
upload.vue封裝了點選上傳的邏輯,而進度條則沒有做，後期可基於percent做引數繼續完善進度條；uploadFormDialog.vue是父盒子，即點選上傳按鈕後彈出的對話方塊，在該元件中需要完成頁面的佈局，拖拽上傳等邏輯；
這樣封裝的意義是為了使得程式碼更便於維護。
upload.vue 點選上傳元件
<template>
<!--upload.vue 點選上傳元件 -->
<div class="file-selector">
<z-btn class="selector-btn" color="primary" @click="handleUpClick">
選擇檔案
</z-btn>
<input
ref="input"
class="file-selector-input"
type="file"
:multiple="multiple"
:accept="accept"
@change="handleFiles"
/>
</div>
</template>
<script>
import {debounce} from 'lodash/function';
export default {
data() {
return {
accept: '.jpg,.jpeg,.png,.gif',multiple: false,list: [],// 已選擇的檔案物件
uploadFinished: true,// 上傳狀態
startIndex: 0,// 開始上傳的下標，用於追加檔案
maxSize: 10 * 1024 * 1024,//10M(size單位為byte)
// source: this.$axios.CancelToken.source(),// axios 取消請求
};
},methods: {
// 重置
reset() {
this.list = [];
this.source.cancel();
this.startIndex = 0;
this.uploadFinished = true;
this.$refs.input && (this.$refs.input.value = null);
},// 呼叫上傳功能
handleUpClick: debounce(function () {
// 可在此維護一個上傳狀態，上傳過程中禁用上傳按鈕
// if (!this.uploadFinished) this.$message.info('即將覆蓋之前的檔案~');
this.$refs.input.click();
},300),handleFiles(e) {
const files = e?.target?.files;
this.readFiles(files);
},// 上傳之前將檔案處理為物件
readFiles(files) {
if (!files || files.length <= 0) {
return;
}
for (const file of files) {
const url = window.URL.createObjectURL(file);
const obj = {
title: file.name.replace(/(.*\/)*([^.]+).*/ig,'$2'),// 去掉檔案字尾
url,file,fileType: file.type,status: 0,// 狀態 -> 0 等待中，1 完成， 2 正在上傳，3 上傳失敗
percent: 0,// 上傳進度
};
// 提前在 data 中定義 list，用來儲存需要上傳的檔案
this.list.unshift(obj);
this.$emit('fileList',this.list);
}
// 在 data 中定義 startIndex 初始值為 0，上傳完成後更新，用於追加上傳檔案
// this.startUpload(this.startIndex);
},}
};
</script>
<style lang="scss">
.file-selector {
.selector-btn {
&:hover {
background-color: rgba($color: #2976e6,$alpha: 0.8);
transition: background 180ms;
}
}
&-input {
display: none;
}
}
</style>uploadFormDialog.vue 上傳對話方塊
<template>
<!-- 上傳dialog -->
<form-dialog
v-model="$attrs.value"
:title="title"
persistent
:loading="loading"
maxWidth="600px"
min-height='400px'
@cancel="handleCancle"
@confirm="handleSubmit"
>
<div
class="d-flex flex-row justify-space-between">
<z-form style='width: 260px; height: 100%;'>
<form-item label="圖片名稱" required>
<z-text-field
v-model="formData.name"
outlined
:rules="rules"
:disabled='disabled'
placeholder="請輸入圖片名稱"
>
</z-text-field>
</form-item>
<form-item label="描述" required>
<z-textarea
v-model="formData.description"
outlined
:disabled='disabled'
placeholder="請輸入描述"
style="resize: none;"
>
</z-textarea>
</form-item>
</z-form>
<div ref="pickerArea" class="rightBox">
<div class="uploadInputs d-flex flex-column justify-center align-center" :class="[ dragging ? 'dragging' : '']">
<div ref="uploadBg" class="uploadBg my-2"></div>
<upload
ref="uploadBtn"
@fileList='fileList'
注：以上程式碼用到了我們自己封裝的元件庫和自己封裝的一些方法，請根據具體場景進行相關的修改。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。