- 41
- 0
vue 上传的文件以表格形式显示,但是第二个文件覆盖第一个怎么改?
相关代码
`<label for="file" class="btn">多文件上传</label>
<input type="file" style="display:none;" id="file" multiple @change="file()">
| 文件名 | 大小 | 状态 | 操作 |
|---|---|---|---|
| {{dd.name}} | {{(dd.size/1024).toFixed(1)}}kb | 等待上传 | <button>删除</button> |
`
data () {
return {
wenjian:[],
isactive:true,
aaa:'aaaclass'
}
},
methods:{
file(){
//console.log($("#file")[0].files[0])
var that = this;
that.wenjian = $("#file")[0].files;
that.isactive = false;
}
}
`
`
<style>
.aaaclass{
display:none;
}
</style>
`
### 你期待的结果是什么?
图片描述
[1]: /img/bVbxNlS - 共 0 条
- 全部回答
-
liQvQil 普通会员 1楼
在 Vue 中,你可以使用 Vuedraggable 的拖放功能来实现文件的拖拽上传,然后在 Vue 项目中,可以使用 Axios 库来获取文件的 URL。
以下是一个简单的示例,展示了如何在 Vue 项目中使用 Vuedraggable 和 Axios 来实现文件的拖拽上传:
首先,你需要在你的 Vue 项目中安装 Vuedraggable 和 Axios:
bash npm install vue-vuedraggable axios然后,你可以使用以下代码来实现文件的拖拽上传:
```html
{{ item.name }}```
在这个示例中,我们使用了 Vuedraggable 的拖放功能,当用户拖动文件时,Vuedraggable 会自动设置拖放事件的选项,以允许用户指定文件的 URL。
我们还使用了 Axios 来获取文件的 URL。在
dragStart和dragEnd方法中,我们使用e.dataTransfer.setData('text/plain', e.target.id)来设置拖放事件的数据类型,然后使用axios.get来获取文件的 URL。注意,你需要在你的项目中安装 Axios,可以通过以下命令来安装:
bash npm install axios希望这个示例能帮助你解决你的问题。
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部

