vue3使用el-upload上傳文件示例詳解
目錄
- el-upload上傳文件
- 屬性
- 方法
- 上傳圖片的實(shí)現(xiàn)
- 存在的坑
- 問(wèn)題1
- 問(wèn)題2
- 問(wèn)題3
el-upload上傳文件
在項(xiàng)目開(kāi)發(fā)的過(guò)程中上傳文件的需求是經(jīng)常會(huì)遇到的，這篇文章我們就詳細(xì)介紹使用elementplus中el-upload來(lái)上傳文件了。
我們先來(lái)看一下el-upload可以配置哪些屬性和事件。
屬性
- action: 請(qǐng)求url
- headers: 設(shè)置上傳的請(qǐng)求頭部
- method: 設(shè)置上傳請(qǐng)求方法
- multiple: 是否支持多選文件
- data: 上傳時(shí)附帶的額外參數(shù)
- name: 上傳的文件字段名
- with-credentials: 支持發(fā)送cookie憑證信息
以上這些參數(shù)都是采用action的默認(rèn)方式請(qǐng)求時(shí)使用的，如果我們使用自定義的請(qǐng)求方法，這些屬性基本上都不會(huì)使用到。
- show-file-list: 是否顯示已上傳文件列表
- drag: 是否啟用拖拽上傳
- accept: 接受上傳的文件類(lèi)型
- on-preview: 點(diǎn)擊文件列表中已上傳文件時(shí)的鉤子
- on-remove: 文件列表移除文件時(shí)的鉤子
- on-success: 文件上傳成功時(shí)的鉤子
- on-error: 文件上傳失敗時(shí)的鉤子
- on-progress: 文件上傳時(shí)的鉤子
- on-change: 文件狀態(tài)改變時(shí)的鉤子，添加，上傳成功和失敗都會(huì)被調(diào)用
- on-exceed: 當(dāng)超出限制時(shí)執(zhí)行的鉤子
- before-upload: 文件上傳之前的鉤子，參數(shù)為上傳的文件， 若返回
false或者返回Promise且被 reject，則停止上傳。 - before-remove: 刪除文件之前的鉤子，參數(shù)為上傳的文件和文件列表， 若返回
false或者返回Promise且被 reject，則停止刪除。 - file-list/v-model:file-list: 默認(rèn)上傳文件
- list-type: 文件列表的類(lèi)型，'text' | 'picture' | 'picture-card'。
- auto-upload: 是否自動(dòng)上傳文件
- http-request: 覆蓋默認(rèn)的 Xhr 行為，允許自行實(shí)現(xiàn)上傳文件的請(qǐng)求
- disabled: 是否禁用上傳
- limit: 允許上傳文件的最大數(shù)量
方法
- abort: 取消上傳請(qǐng)求
- submit: 手動(dòng)上傳文件列表
- clearFiles: 清空已上傳的文件列表（該方法不支持在
before-upload中調(diào)用） - handleStart: 手動(dòng)選擇文件
- handleRemove: 手動(dòng)移除文件。
file和rawFile已被合并。
上傳圖片的實(shí)現(xiàn)
上傳圖片的時(shí)候我們一般都會(huì)重寫(xiě)http請(qǐng)求，不使用默認(rèn)的action去請(qǐng)求，因此action我們一般都會(huì)設(shè)置成‘#’。
<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" />
<span>
<span
@click="handlePictureCardPreview(file)"
>
<el-icon><zoom-in /></el-icon>
</span>
<span
@click="handleRemove(file)"
>
<el-icon><Delete /></el-icon>
</span>
</span>
</div>
</template>
</el-upload>
<el-dialog v-model="previewVisible">
<img w-full :src="dialogImageUrl" />
</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({
// 允許上傳文件件的最大數(shù)量
limit:{
type:Number
},
// 是否禁用上傳
disabled:{
type:Boolean,
default:false
},
// 文件列表類(lèi)型
listType:{
type:String,
default:"picture-card"
},
// 上傳時(shí)攜帶的額外參數(shù)
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({});
// 預(yù)覽大圖
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);
};
// 文件上傳數(shù)量限制
const handleExceed = (files, fileList) => {
if (props.limit) {
ElMessage.error(`只能上傳${props.limit}張圖片`);
}
console.log("handleExceed", handleExceed);
console.log("files", files);
console.log("fileList", fileList);
};
// 上傳請(qǐng)求
const uploadAction = (option) => {
let formData = new FormData();
const url = "";
globObj.$axios({
url: url,
method: "post",
transformRequest: [function(data, headers) {
// 去除post請(qǐng)求默認(rèn)的Content-Type
delete headers["Content-Type"]
return data
}],
data: formData,
timeout: 300000
}).then(res => {
ElMessage.success("資產(chǎn)添加成功");
}).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("請(qǐng)上傳2M以內(nèi)的圖片文件!");
return false
}
return true;
};
// 文件上傳成功時(shí)的鉤子
const uploadSuccess = (response, file, fileList) => {
// 上傳成功之后后臺(tái)返回的數(shù)據(jù)
console.log("uploadSuccess", uploadSuccess);
};
const uploadProgress = (e, file, fileList) => {
console.log("uploadProgress", uploadProgress)
};
const uploadError = (err, file, fileList) => {
console.log("uploadError", uploadError);
};
</script>
存在的坑
一般上傳文件的話請(qǐng)求頭中的Content-Type: multipart/form-data;我們的需求中還需要設(shè)置文件的隨機(jī)數(shù)，因此請(qǐng)求頭需要是這樣的Content-Type: multipart/form-data; boundary=----WebKitFormBoundarypzSlbADtTRuFx5FC。
下面是我遇到的問(wèn)題。
問(wèn)題1
設(shè)置了Content-Type: multipart/form-data;此時(shí)請(qǐng)求一直沒(méi)有隨機(jī)數(shù)boundary=----WebKitFormBoundarypzSlbADtTRuFx5FC。
如果設(shè)置了全局的content-type,會(huì)發(fā)現(xiàn)上傳接口設(shè)置multipart/form-data是不起作用的，因?yàn)闆](méi)有Boundary，所以上傳必定失敗，服務(wù)器500。
然后嘗試手動(dòng)添加Boundary，這次錯(cuò)誤變400了
問(wèn)題2
后來(lái)通過(guò)查詢資料，說(shuō)不用設(shè)置Content-Type: multipart/form-data;只要參數(shù)是formData形式，瀏覽器就會(huì)自動(dòng)將請(qǐng)求頭的Content-Type轉(zhuǎn)成Content-Type: multipart/form-data; boundary=----WebKitFormBoundarypzSlbADtTRuFx5FC。
但是我不設(shè)置的話就是默認(rèn)的application/json。
于是查閱資料發(fā)現(xiàn)axios的transformRequest屬性可以在向服務(wù)器發(fā)送請(qǐng)求數(shù)據(jù)之前修改請(qǐng)求數(shù)據(jù)，因?yàn)槲覀兊恼?qǐng)求在默認(rèn)的post請(qǐng)求方式時(shí)Content-Type的值是application/json，需要去掉默認(rèn)的值，這樣瀏覽器就可以自動(dòng)添加了。
globObj.$axios({
url: url,
method: "post",
transformRequest: [function(data, headers) {
// 去除post請(qǐng)求默認(rèn)的Content-Type
delete headers["Content-Type"]
return data
}],
data: formData,
timeout: 300000
}).then(res => {
ElMessage.success("資產(chǎn)添加成功");
}).catch((err) => {
console.log(err);
});
問(wèn)題3
如果還要傳其他的參數(shù)，其他的參數(shù)必須也要append進(jìn)去，否則可能會(huì)報(bào)參數(shù)錯(cuò)誤。
const formData = new FormData();
formData.append("file", file);
// 其他參數(shù)
formData.append("mailSys", mailSys);
以上就是vue3使用el-upload上傳文件示例詳解的詳細(xì)內(nèi)容，更多關(guān)于vue3 el-upload上傳文件的資料請(qǐng)關(guān)注其它相關(guān)文章！
網(wǎng)公網(wǎng)安備