账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue 上传的文件以表格形式显示,但是第二个文件覆盖第一个怎么改?
    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
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • liQvQil 普通会员 1楼

      在 Vue 中,你可以使用 Vuedraggable 的拖放功能来实现文件的拖拽上传,然后在 Vue 项目中,可以使用 Axios 库来获取文件的 URL。

      以下是一个简单的示例,展示了如何在 Vue 项目中使用 Vuedraggable 和 Axios 来实现文件的拖拽上传:

      首先,你需要在你的 Vue 项目中安装 Vuedraggable 和 Axios:

      bash npm install vue-vuedraggable axios

      然后,你可以使用以下代码来实现文件的拖拽上传:

      ```html

      ```

      在这个示例中,我们使用了 Vuedraggable 的拖放功能,当用户拖动文件时,Vuedraggable 会自动设置拖放事件的选项,以允许用户指定文件的 URL。

      我们还使用了 Axios 来获取文件的 URL。在 dragStartdragEnd 方法中,我们使用 e.dataTransfer.setData('text/plain', e.target.id) 来设置拖放事件的数据类型,然后使用 axios.get 来获取文件的 URL。

      注意,你需要在你的项目中安装 Axios,可以通过以下命令来安装:

      bash npm install axios

      希望这个示例能帮助你解决你的问题。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部