admin管理员组文章数量:1574036
需求：需要使用el-upload自定义上传cad的图片或普通图片，这边需要判断区分下，以及上传后清空上传文件列表
1.效果
在点击确定后才会请求后端的接口，并且携带后端所需其他参数
上传成功之后通过后端的链接跳转到网页可以查看上传的CAD图纸
2.代码实现和讲解
2.1参数讲解
参数讲解：
- before-upload：上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
:http-request：覆盖默认的上传行为，可以自定义上传的实现
:limit="2"：允许最大上传个数，我这边只允许上传一个，为什么为2是因为在change的时候会删除一个保证这个上传只会有一个文件成功
drag：使用拖拽上传
action="#"：必选参数，上传的地址，为#是因为我们要自定义上传
:auto-upload="false"，是否在选取文件后立即进行上传，这个就是控制自定义上传开关
:on-change：上传时间，保证只有一个文件上传，上传的时候会删除上一个文件
<el-upload
style="text-align: center"
:before-upload="handleBeforeUpload"
:http-request="handleFileUpload"
class="upload-demo"
:limit="1"
drag
action="#"
:auto-upload="false"
ref="upload"
:on-change="handleChange"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
点击或将文件拖拽到这里上传 <br />
<span class="el-uptext">上传dwg/png/dxf文件，且不超过10m</span>
</div>
</el-upload>2.2上传文件之前的钩子
endsWith：是字符串方法，用于检查当前字符串是否以指定的字符串作为结尾。对于图片文件，如PNG，通常会使用特定的媒体类型，如
image/png。然而，对于非标准或二进制文件，如DWG文件，type监测不到，所以需要通过上传文件名来判断是否为dwg的文件。
handleBeforeUpload(file) {
const isDWG = file.name.endsWith(".dwg");
const isDXF = file.name.endsWith(".dxf");
const isLt10M = file.size / 1024 / 1024 < 10; // 文件大小小于10MB
if (
file.type == "image/jpeg" ||
file.type == "image/png" ||
file.type == "image/gif" ||
isDWG ||
isDXF
) {
if (!isLt10M) {
this.$message.error("上传文件大小不能超过10MB！！！");
return false;
} else {
return true;
}
} else {
this.$message.error("请上传正确的文件格式！！！");
return false;
}
},2.3上传文件的change事件
filetemp: [],自定义一个filetemp，每次上传的时候都删除第一个文件，保证文件列表只会有最新的上传文件存在，需要配合 :limit="2"实现
handleChange(file, filelist) {
console.log(file, "上传文件事件");
if (file.status === "ready") {
if (filelist.length > 1) {
filelist.splice(0, 1);
}
this.filetemp = filelist;
}
},2.4文件上传
如果有文件就提交，如果没有就提示
submitPointImg() {
if (this.filetemp.length > 0) {
this.$refs.upload.submit(); //重点
} else {
this.$message({
type: "warning",
message: "请先上传附件！",
});
}
},2.5请求接口并且携带参数
请求接口需要设置下请求头，这是一种特殊的
'Content-Type'值，适用于需要上传文件或发送多个相关数据部分的场景，如HTML表单中包含文件输入控件的提交。当设置为'multipart/form-data'时，数据会被分割成多个独立的部分（每个部分有自己的二进制数据、元数据及边界标识符），然后一起发送到服务器。这种格式允许同时发送文本字段和文件内容，且能保持数据间的关联性，便于服务器端正确解析和处理，也就是可以上传二进制的文件
export const Api_cadUploadImg = (formData) => {
// 设置请求头，告诉服务器我们发送的是 multipart/form-data 类型的数据
const config = {
headers: {
'Content-Type': 'multipart/form-data'
}
};
// 使用 axios 发送 post 请求，并传递 FormData 和配置
return request.post("请求地址", formData, config);
};注意一定要创建formData实例，不然上传的不是二进制文件 ，其他参数直接通过append添加就行了
// 创建 FormData 实例
const formData = new FormData();
// 上传成功后清空上传的内容
this.$refs.upload.clearFiles();
// 处理文件上传操作
handleFileUpload(options) {
this.loadingUpload = true;
let { file } = options;
console.log(options, file, "文件上传");
// // // 创建 FormData 实例
const formData = new FormData();
// 将文件添加到 FormData 中
formData.append("file", file);
formData.append("project_id", this.projectData.id);
// // 调用后端服务器的接口
Api_cadUploadImg(formData)
.then((res) => {
console.log(res, "上传成功回调");
if (res.code == 200) {
this.$message.success("上传成功！！");
this.uploadBasePointDialog = false;
}
this.loadingUpload = false;
// 上传成功后清空上传的内容
this.$refs.upload.clearFiles();
})
.catch((err) => {
this.loadingUpload = false;
this.$message.error("上传失败");
// this.$refs.upload.clearFiles();
});
},2.6普通图片预览和dwg格式预览，这边需要区分一下
openImage() {
// 如果有图片
if (this.projectData.point_base_cad) {
//这个是上传成功后的文件地址，如这种，需要赓续后端接口返回的进行更改
"\\files\\basepoint_cad\\44eaa117-d14b-4cd1-98451-8940d2ae51da.jpg"
let filename = this.projectData.point_base_cad;
// 获取文件名的最后一个点号的位置
const lastIndex = filename.lastIndexOf(".");
// 如果找到了点号，则截取点号之后的部分作为后缀名
if (lastIndex !== -1) {
const extension = filename.substr(lastIndex + 1).toLowerCase(); // 转为小写以便比较
// 检查后缀名是否不是dwg或dxf
if (extension !== "dwg" && extension !== "dxf") {
window.open(`http://普通文件地址${filename}`, "_blank");
} else {
const filePath = this.extractAfterSecondSlash(filename);
window.open(
`http://dwg和dxf文件地址/mxweb3d.html?file=${filePath}`,
"_blank"
);
}
}
} else {
this.$message.warning("请先上传基点布置图！！");
}
},文章到此结束希望对你有所帮助~
版权声明：本文标题：el-upload自定义上传dwgdxf文件并且携带额外参数（CAD） 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1727766239a1128503.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论