溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“vue3中怎么使用el-upload上傳文件”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue3中怎么使用el-upload上傳文件”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
在項目開發的過程中上傳文件的需求是經常會遇到的，這篇文章我們就詳細介紹使用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: 手動選擇文件
handleRemove: 手動移除文件。 file 和rawFile 已被合并。
上傳圖片的時候我們一般都會重寫http請求，不使用默認的action去請求，因此action我們一般都會設置成‘#’。
<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>一般上傳文件的話請求頭中的Content-Type: multipart/form-data;我們的需求中還需要設置文件的隨機數，因此請求頭需要是這樣的Content-Type: multipart/form-data; boundary=----WebKitFormBoundarypzSlbADtTRuFx5FC。
下面是我遇到的問題。
設置了Content-Type: multipart/form-data;此時請求一直沒有隨機數boundary=----WebKitFormBoundarypzSlbADtTRuFx5FC。
如果設置了全局的content-type,會發現上傳接口設置multipart/form-data是不起作用的，因為沒有Boundary，所以上傳必定失敗，服務器500。
然后嘗試手動添加Boundary，這次錯誤變400了
后來通過查詢資料，說不用設置Content-Type: multipart/form-data;只要參數是formData形式，瀏覽器就會自動將請求頭的Content-Type轉成Content-Type: multipart/form-data; boundary=----WebKitFormBoundarypzSlbADtTRuFx5FC。
但是我不設置的話就是默認的application/json。
于是查閱資料發現axios的transformRequest屬性可以在向服務器發送請求數據之前修改請求數據，因為我們的請求在默認的post請求方式時Content-Type的值是application/json，需要去掉默認的值，這樣瀏覽器就可以自動添加了。
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);
});如果還要傳其他的參數，其他的參數必須也要append進去，否則可能會報參數錯誤。
const formData = new FormData();
formData.append('file', file);
// 其他參數
formData.append('mailSys', mailSys);讀到這里，這篇“vue3中怎么使用el-upload上傳文件”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
