javascript - vue input 文件上传为什么@change不触发？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>excel 文件上传</title>
</head>
<body>
<input
type="file"
@click="e => {e.target.value = '';} "
@change="sendFiles"
/>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script>
let { createApp, reactive, toRefs, ref, onMounted, getCurrentInstance } =
Vue;
// Object.assign(window, Vue);
const app = createApp({
setup() {
function sendFiles(files) {
console.log("触发发送文件change");
// const reader = new FileReader();
// const file = files[0];
// reader.readAsArrayBuffer(file);
// reader.onload = function (e) {
// console.log(e.target.result);
// axios.post("/uploadExcel/" + file.name, {
// file: e.target.result,
// });
// };
}
onMounted(() => {});
return {
sendFiles,
};
},
});
</script>
</body>
</html>
共有1个答案
忘了要挂载啥的了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>excel 文件上传</title>
</head>
<body>
<div id="app" v-cloak>
<input type="file" @change="sendFiles" />
<div @click="sendFiles">8888</div>
</div>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script>
let { createApp, reactive, toRefs, ref, onMounted, getCurrentInstance } =
Vue;
// Object.assign(window, Vue);
const app = createApp({
setup() {
function sendFiles(files) {
console.log("触发发送文件change");
// const reader = new FileReader();
// const file = files[0];
// reader.readAsArrayBuffer(file);
// reader.onload = function (e) {
// console.log(e.target.result);
// axios.post("/uploadExcel/" + file.name, {
// file: e.target.result,
// });
// };
}
onMounted(() => {});
return {
sendFiles,
};
},
});
app.mount("#app");
</script>
</body>
</html>-
问题内容： 经过一整天的研究和尝试，我终于放弃了 纯AJAX的 上传文件（ps：本文如何与JQuery异步上传文件？埋了我的最后希望） 我的问题可能没什么意义，但是我仍然想知道为什么ajax（或XMLHttpRequest）不能处理这个问题？为什么文件不能像真正的httprequest那样传输？ 问题答案： 出于安全原因，JavaScript无法读取本地文件，因此我们无法使用AJAX发送数据。 但
-
我不知道这是与代码有关还是与服务器有关... 在一个PHP页面上，我调用了一个包含标准PHP上传过程的上传函数。在调用函数之后，我执行重定向（尝试使用window.location或header（））。 奇怪的是，每件事都运行良好的几次，然后它就不会再上传了（uploadOK也不会是0）。它不会将文件移动到服务器上。 然后，我将取出重定向，上传将重新开始工作。我把重定向放回去，上传还能工作几次，然
-
我使用dropwizard制作了一个非常传统的文件上传方法。 所以我在资源中有一个这样的方法 里面没有什么特别的，它只是保存到一个路径，使用java.nio库，就像这样 它只是不会上传excel文件。我在其他地方读到excel文件和它们的底层类型受到怀疑。请问我需要做什么？
-
问题内容： 具体来说，我正在寻找一个基于JavaScript和/或Flash的客户端多文件上传器。我找到的最接近的东西是FancyUpload。任何人都有经验吗？如果没有，那还有什么呢？ 问题答案： Yahoo的YUI上载器是您的朋友。
-
getFileStream光将文件转换为字符串就需要特别长的时间，再到切片，而且上传上去的文件比原来大了，再下载下来也不对
-
问题内容： 我在Windows 7计算机上安装了WampServer 2。我正在使用Apache 2.2.11和PHP 5.2.11。当我尝试从表单上传任何文件时，似乎都在上传，但是在PHP中，数组为空。文件夹中没有文件。我已配置为允许文件上传等。该文件夹具有当前用户的读/写特权。我很沮丧 HTML： PHP： 问题答案： 谢谢大家的全面答复。这些都非常有帮助。答案很奇怪。事实证明，PHP 5.2
-
问题内容： 我的代码中有一个。我已添加。但是它还是没有被触发。我已经尝试了很多时间，但是没有找到解决方案。 但是控制台中没有任何内容。请建议我我在做什么错。 问题答案： FocusListener不是JComboBox的适当监听器，另外一个监听器可以创建无限循环（尤其是可编辑的JComboBox）， 的FocusListener是异步的，有时是太难捕捉事件是正确的订单特别是在案件JComponen