144  
查询码:00000742
使用input标签实现上传功能
作者: 徐文彬 于 2022年05月16日 发布在分类 / 人防组 / 人防前端 下,并于 2022年05月16日 编辑

使用input标签实现上传功能

此文档以导入功能为例

template

      < input
        type= "file"
        id= "fileInput"
        ref= "fileInput"
        multiple
        @ change=" uploadFun( $event)"
        style= "display: none"
      / >

script

uploadFun( e) {
      const objList = this. $refs. fileInput. files;
      const fileList = [... objList];
      let formData = new FormData();
      fileList. forEach(( item) => {
        formData. append( 'file', item);
      });
      if ( fileList. length > 0) {
        const that = this;
        that. $api. Law. ImportFun( formData)
          . then(( res) => {
            if ( res. status. code == 200) {
              if ( res. result. status === 1) {
                that. $message({
                  type : 'success',
                  message : res. result. infoList,
                });
              } else {
                that. $message({ type : 'error', message : res. result. infoList });
              }

              that. showListData( 1);
            } else {
              that. $message({ type : 'error', message : res. status. message });
            }
            e. target. value = '';
          })
          . catch(() => {
            e. target. value = '';
          });
      }
    },

遇到的bug

1、无法连续使用上传功能

原因:上传文件之后再次上传,input无法识别出改变,所以不会调用上传功能

解决方法:在上传文件之后清空input的值

粘贴图片



 推荐知识

 历史版本

修改日期 修改人 备注
2022-05-16 16:49:58[当前版本] 徐文彬 使用input标签实现上传功能

 附件

附件类型

PNGPNG

  目录
    知识分享平台 -V 4.8.7 -wcp