el-upload上 传文件
在项目开发的 过程中 上传文件的需求是经常会遇到的，这篇 文章 我们就详细介绍使用elementplus中el-upload来上传文件了。
我们先来看一下el-upload可以配置 哪些 属性和事件。
属性
action: 请求url headers: 设置上传的请求头部 method: 设置上传请求方法 multiple: 是否 支持多选文件 data: 上传时附带的额外参数 n am e: 上传的文件字段名 w IT h-c red entials: 支持发送cookie凭证信息以上这些参数都是采用action的默认方式请求时使用的，如果我们使用自定义的请求方法，这些属性基本上都不会使用到。
show-file-list: 是否显示已上传文件列表 Drag : 是否启用拖拽上传 accept: 接受上传的 文件类型 on-p rev iew: 点击文件列表中已上传文件时的钩子 on-remove: 文件列表移除文件时的钩子 on -s uccess: 文件上传成功时的钩子 on-error: 文件上传失败时的钩子 on- PR ogress: 文件上传时的钩子 on-change: 文件状态 改变 时的钩子，添加，上传成功和失败都会被调用 on-exceed: 当超出限制时执行的钩子 before-upload: 文件上传之前的钩子，参数为上传的文件， 若返回 false 或者 返回 P rom ise 且被 reject，则停止上传。 before-remove: 删除文件之前的钩子，参数为上传的文件和文件列表， 若返回 false 或者返回 Promise 且被 reject，则停止删除。 file-list/v-model:file-list: 默认上传文件 list -t y PE : 文件列表的类型，& # 39;text' | 'picture' | 'picture-card'。 auto-upload: 是否自动上传文件 http-request: 覆盖默认的 X hr 行为，允许自行实现上传文件的请求 disabled: 是否禁用上传 limit: 允许上传文件的 最大数 量
方法
abort: 取消上传请求 s ub mit: 手动上传文件列表 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 -i con><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-dia LOG 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, define Props, defineEmits, computed, get current Instance } 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 changeFil ei ndex = ref(-1);
const uploadImgArr = reactive({
data: []
});
const headers = reactive({});
// 预览大图
const handlePictureCardPreview = (uploa DF ile) => {
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 is jpg = 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=---- webkit FormBoundarypzSlbADtTRuFx5 fc 。
下面是我遇到的问题。
问题1
设置了Content-Type: multipart/form-data;此时请求一直没有随机数boundary=----WebKitFormBoundarypzSlbADtTRuFx5FC。
如果设置了全局的content-type,会发现上传接口设置multipart/form-data是不起作用的，因为没有Boundary，所以上传必定失败， 服务器 500。
然后尝试手动添加Boundary，这次错误变400了
问题2
后来通过查询资料，说 不用 设置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);
});
问题3
如果还要传其他的参数，其他的参数必须也要append进去，否则可能会报参数错误。
const formData = new FormData();
formData.append('file', file);
// 其他参数
formData.append('m ai l Sys ', mailSys);
以上就是vue3使用el-upload上传文件示例详解的详细内容，更多关于vue3 el-upload上传文件的资料请关注其它相关文章！
您可能感兴趣的文章: vue el-upload上传文件的示例代码 vue使用el-upload上传文件及Feign服务间传递文件的方法 Vue导入excel文件的两种方式(form表单和el-upload) vue使用el-upload实现文件上传功能 vue项目ElementUI组件中el-upload组件与图片裁剪功能组件结合使用详解
总结
以上是 为你收集整理的 vue3使用el-upload上传文件示例详解 全部内容，希望文章能够帮你解决 vue3使用el-upload上传文件示例详解 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于vue3使用el-upload上传文件示例详解的详细内容...