在專案開發的過程中上傳檔案的需求是經常會遇到的,這篇文章我們就詳細介紹使用elementplus中el-upload來上傳檔案了。
我們先來看看el-upload可以設定哪些屬性和事件。
action: 請求url
#headers: 設定上傳的請求頭部
method: 設定上傳請求方法
multiple: 是否支援多重選取檔案
data: 上傳時附帶的額外參數
name: 上傳的檔案欄位名稱
#with-credentials: 支援傳送cookie憑證資訊
#以上這些參數都是採用action的預設方式請求時使用的,如果我們使用自訂的請求方法,這些屬性基本上都不會使用到。
show-file-list: 是否顯示已上傳檔案清單
#drag: 是否啟用拖曳上傳
accept: 接受上傳的檔案類型
on-preview: 點選檔案清單中已上傳檔案時的鉤子
on-remove: 檔案清單移除檔案時的鉤子
on-success: 檔案上傳成功時的鉤子
on-error:檔案上傳失敗時的鉤子
on-progress: 檔案上傳時的鉤子
on-change: 檔案狀態改變時的鉤子,添加,上傳成功和失敗都會被呼叫
on-exceed: 當超出限制時執行的鉤子
before-upload: 檔案上傳先前的鉤子,參數為上傳的文件, 若返回false
或返回 Promise
且被reject,則停止上傳。
before-remove: 刪除檔案之前的鉤子,參數為上傳的檔案和檔案列表, 若返回false
或返回Promise
且被reject,則停止刪除。
file-list/v-model:file-list: 預設上傳檔案
list-type: 檔案清單的類型,'text ' | 'picture' | 'picture-card'。
auto-upload: 是否自動上傳檔案
#http-request: 覆寫預設的Xhr 行為,允許自行實作上傳檔案的請求
disabled: 是否停用上傳
#limit: 允許上傳檔案的最大數量
abort: 取消上傳要求
submit: 手動上傳檔案清單
clearFiles: 清除已上傳的檔案清單(該方法不支援在 before-upload
中呼叫)
handleStart: 手動選擇檔案
file
和<template> <div> <el-upload action="#" :headers="headers" :list-type="listType" :http-request="uploadAction" :on-exceed="handleExceed" :on-remove="handleRemove" :before-upload="beforeUpload" :on-success="uploadSuccess" :on-error="uploadError" :on-progress="uploadProgress" :file-list="fileListCopy.data" ref="upload" :multiple="true" :limit='limit' :disabled="disabled" :data="paramData" > <el-icon><Plus /></el-icon> <template #file="{ file }"> <div> <img :src="file.url" alt="" /> <span class="el-upload-list__item-actions"> <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)" > <el-icon><zoom-in /></el-icon> </span> <span class="el-upload-list__item-delete" @click="handleRemove(file)" > <el-icon><Delete /></el-icon> </span> </span> </div> </template> </el-upload> <el-dialog v-model="previewVisible"> <img w-full :src="dialogImageUrl" alt="Preview Image" /> </el-dialog> </div> </template> <script> export default { name: 'uploadImg' } </script> <script setup> import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue'; import { reactive, ref, defineProps, defineEmits, computed, getCurrentInstance } from 'vue'; import { ElMessage } from 'element-plus'; const props = defineProps({ // 允许上传文件件的最大数量 limit:{ type:Number }, // 是否禁用上传 disabled:{ type:Boolean, default:false }, // 文件列表类型 listType:{ type:String, default:'picture-card' }, // 上传时携带的额外参数 paramData: { type:String } }); const emits = defineEmits([]); const cns = getCurrentInstance(); const globObj = cns.appContext.config.globalProperties; const previewVisible = ref(false); const dialogImageUrl = ref(''); const fileListCopy = reactive({ data: [] }); const onece = ref(false); const myChangeFile = ref(''); const changeFileIndex = ref(-1); const uploadImgArr = reactive({ data: [] }); const headers = reactive({}); // 预览大图 const handlePictureCardPreview = (uploadFile) => { dialogImageUrl.value = uploadFile.url; previewVisible.value = true; }; // 移除图片 const handleRemove = (file, fileList) => { console.log('handleRemove', handleRemove); console.log('file', file); console.log('fileList', fileList); fileListCopy.data = fileListCopy.data.filter(v => v.uid !== file.uid); }; // 文件上传数量限制 const handleExceed = (files, fileList) => { if (props.limit) { ElMessage.error(`只能上传${props.limit}张图片`); } console.log('handleExceed', handleExceed); console.log('files', files); console.log('fileList', fileList); }; // 上传请求 const uploadAction = (option) => { let formData = new FormData(); const url = ''; globObj.$axios({ url: url, method: 'post', transformRequest: [function(data, headers) { // 去除post请求默认的Content-Type delete headers['Content-Type'] return data }], data: formData, timeout: 300000 }).then(res => { ElMessage.success('资产添加成功'); }).catch((err) => { console.log(err); }); } // 格式大小的限制 const beforeUpload = (file) => { let isJPG = false, fileType = file.type.split('/')[0]; if(file.type === "image/jpeg" || file.type === "image/png") { isJPG = true; } else { isJPG = false; } const isLt2M = file.size / 1024 / 1024; if (fileType != 'image' || isLt2M > 2) { ElMessage.error("请上传2M以内的图片文件!"); return false } return true; }; // 文件上传成功时的钩子 const uploadSuccess = (response, file, fileList) => { // 上传成功之后后台返回的数据 console.log('uploadSuccess', uploadSuccess); }; const uploadProgress = (e, file, fileList) => { console.log('uploadProgress', uploadProgress) }; const uploadError = (err, file, fileList) => { console.log('uploadError', uploadError); }; </script>
globObj.$axios({ url: url, method: 'post', transformRequest: [function(data, headers) { // 去除post请求默认的Content-Type delete headers['Content-Type'] return data }], data: formData, timeout: 300000 }).then(res => { ElMessage.success('资产添加成功'); }).catch((err) => { console.log(err); });###問題3######如果還要傳其他的參數,其他的參數必須也要append進去,否則可能會報參數錯誤。 ###
const formData = new FormData(); formData.append('file', file); // 其他参数 formData.append('mailSys', mailSys);
以上是vue3如何使用el-upload上傳文件的詳細內容。更多資訊請關注PHP中文網其他相關文章!