大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
input[type=“file”]上传文件原理详解https://blog.csdn.net/weixin_42193004/article/details/96275626
formData:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects
结果：
代码：
<div>
<span>上传文件：</span>
<a class="upload" id="up_btn">
<input type="file" @change="uploadFile()" class="change" id="file1" />
选择文件
</a>
<a
:href="this.config.hostfile + file1.FilePath"
:download="file1.SysFileName"
target="_blank"
class="file2"
>{
{file1.OriginName}}</a>
</div>
import axios from "axios";
data() {
return {
file1: {
name: "",
url: "",
download: "",
}
}
}
methods：{
uploadFile() {
let f = document.getElementById("file1");
if (f.files) {
let fileList = f.files;
let formData = new FormData(); //创建空对象
for (let i = 0; i < fileList.length; i++) {
//如需判断文件就在这判断 现在不判断
formData.append("film", fileList[i]);
}
axios
.post(文件上传接口, formData)
.then((res) => {
if (res.data.Success) {
this.file1 = res.data.Result;
} else {
this.$message.error(res.Msg || "获取数据失败，无法上传");
}
})
.catch((err) => {
console.log(err);
this.$message.error("无法上传");
});
}
}
}
.upload {
padding: 4px 10px;
height: 20px;
background-color: #00b3ee;
color: #fff;
position: relative;
}
.change {
position: absolute;
top: 0;
left: 0px;
overflow: hidden;
opacity: 0;
width: 76px;
height: 24px;
}
.file2{
padding-left: 10px;
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/170634.html原文链接：https://javaforall.net
