vue 多文件上传

单文件上传简直就是信手拈来

多文件 让我痛不欲生

使用ELE 的上传控件

     <el-form :inline="true" ref="batchformline"  style="padding-left:50px">
              <el-upload :limit="30" ref="upload" 
                         action="http://local.hymexa.com:5000/api//RawMap/UploadMapFiles" 
                         :on-change="getFiles" 
                         :auto-upload="false"
                         accept="txt"
                         :before-remove="beforeRemove" 
                         :file-list="fileList"
                         multiple>
                <el-button size="mini" type="primary">选择文件...</el-button>
              </el-upload>
              
            </el-form>   
      </el-row>
      
      <el-row>
        <el-col :offset="13">
          <el-form-item>
            <el-button type="primary" icon="el-icon-check" @click="onSubmit">保存</el-button>
            <el-button icon="el-icon-close" @click="batchhandleClose">取消</el-button>
          </el-form-item>
        </el-col>
      </el-row>

JS代码

onSubmit() {
     this.$refs["form"].validate(valid=>{
          if(valid){
            var _that = this;
            var file = _that.file;
            if (file == null) {
                this.$message.error('请选择相应的数据文件');
                return false;
            }
            else{
            _that.fileUpload();
            }
            //debugger;
            //console.log(this.form);
          }
      });
      //对其中的一些输入框进行验证 验证就不说了 ELE有
    
      fileUpload() {
            var _that = this;
            var file = _that.file;
            console.log(_that.fileList)
            if (this.file == null) {
                _that.$message.error('请选择相应的数据文件~');
                return false;
            } else {
            var entity = JSON.stringify(_that.form);
            var formData = new FormData();
        for (let i = 0; i < _that.fileList.length; i++) {
               //   formData.append('formData', _that.fileList[i].raw);  // 上传的文件
                  formData.append("filedata", _that.fileList[i].raw);
                  formData.append("entity",entity)
                }
        UploadMapFiles(formData, entity).then(res => {
                    this.$message.info(res.Data);
                    this.batchhandleClose();
                    this.getList();
          this.dialogVisibleAdd = false;//关闭页面
        }).catch(err => {
                    console.log(err)
                  this.$message.warning(err);
                   this.batchhandleClose();
                });
               this.batchhandleClose();
            }
            this.$refs.form.resetFields()
        },
  batchhandleClose(done) {
            var _that = this;
            _that.$refs.upload.clearFiles();
            _that.file = null;
            _that.hasfile = false;
            _that.batchdrawer = !_that.batchdrawer;
            _that.getList();
            _that.dialogVisibleAdd=false;//关闭页面
            //done();
        },
            
              batchhandleClose(done) {
            var _that = this;
            _that.$refs.upload.clearFiles();
            _that.file = null;
            _that.hasfile = false;
            _that.batchdrawer = !_that.batchdrawer;
            _that.getList();
            _that.dialogVisibleAdd=false;//关闭页面
            //done();
        },

后端代码：只需要使用 List进行接收就ok了

 

其次就是文件流的读取：

                List<string> fileLines = new List<string>();
                using (MemoryStream fs = new MemoryStream())
                {
                    //file是一个IFormFile对象
                    var stream = file.OpenReadStream();
                    //StreamReader 读取可以通过文件路径 也可以直接传一个stream流 请指定字符 
                    //本例中上传的是txt文件并且无中文 
                    using (StreamReader reader = new StreamReader(stream, Encoding.Default))
                    {
                        //2读取
                        string line;
                        while ((line = reader.ReadLine()) != null)
                        {
                            fileLines.Add(line);
                        }
                    }
                }