input type="file"使用

stonezhu 发布于2019-08-01 18:42 / 3200人阅读

问题：

在实际开发过程中，会遇到上传文件的一些需求。但是使用原生的在使用中存在一些问题

在未上传文件时，显示"no file choosen"，用户界面不友好，不可配置

上传同一个文件，不会触发change事件，即使该文件做过修改

用户如果在上传过程中点击了“取消”，已经上传的文件会被移除

解决思路

在阅读了一些源码之后，总结了如下的解决方案。有点偷梁换柱的意思:

将真正的隐藏，使用自定义的button通过$refs去触发文件上传，实现自定义显示

文件上传之后，处理完文件，将的value设置为null，这样下次即使上传的是同一个文件，仍然会触发change事件

使用上述方法，点击取消文件被移除，但是不影响页面展示

具体实现





    
    
    Vue



    
        
        {{fileName}}

感想

遇到问题的时候多去看看别人是怎么写的，借鉴一下，解决问题的同时能够学习很多东西。

私有云 GPU服务器 Quote quoted quot python b&quot&quot

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52008.html

type=&quot;file&quot;的input框样式修改的方法

摘要：开启的方式很简单，点击开发者工具右上角的齿轮，然后在弹出的层中把这个勾打上就可以了。对于这个文件，如果是浏览器的粉丝，必然知道这个路径的存在。关于type=file的input是啥？这个是啥我觉得没必要再说了，反正大家都知道，然后在现在有各种手机的时代，还可以通过直接拍照的方式来上传，反正比以前好玩多了。并且以前是只能上传一个文件，现在的话，只要增加multiple属性就可以...

littleGrow 2019-08-28 17:59 评论0 收藏0
vue导入处理Excel表格功能步骤实例

　　1. 前言　　本篇文章就是为大家讲讲前端导入并处理excel表格的情况，顺便讲讲vue导入并处理excel数据；也总结下使用工具。　　2.vue导入Excel表格　　vue导入Excel表格主要有两种常用的方法，一个是借助ElementUI文件上传进行表格导入，另一个是自带的input做文件上传；以下对两个方法做详细介绍；　　2.1 使用ElementUI中的upload组件　　安装Eleme...

3403771864 2022-11-29 09:16 评论0 收藏0
Python实操之各种音频文件格式免费转换

　　Pydub是1个根据ffmpeg的Python数字音频处理控制模块，封装形式了很多ffmpeg最底层插口，因而用这个方法做歌曲格式转化会十分方便。今日为大家介绍它歌曲格式转化作用，基本上适用所有歌曲音频文件格式，所需要的可以了解一下　　Pydub是1个根据ffmpeg的Python数字音频处理控制模块，封装形式了很多ffmpeg最底层插口，因而用这个方法做歌曲格式转化会十分方便，假如你阅读文章...

89542767 2023-01-02 21:26 评论0 收藏0
js实现新闻轮播效果

　　如何利用JS实现新闻自动轮播效果，现在看看具体代码：这是原生js实现新闻轮播效果，且附详细注释　　<!DOCTYPEhtml> 　　<html> 　　<head> 　　<metacharset="UTF-8"> 　　<metaname="viewport"content="width=dev...

3403771864 2022-09-21 06:37 评论0 收藏0