upload 文件自动上传写法，前后端 下载流文件流

最新推荐文章于 2024-04-22 17:38:08 发布
最新推荐文章于 2024-04-22 17:38:08 发布
阅读量489 收藏
点赞数
文章标签： web3 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52946104/article/details/131768112
版权 
<el-upload
          v-model:file-list="fileList"
          :action="app.api+'/student/student/import'"
          :headers="{
       //   'Content-Type': 'multipart/form-data;boundary=----split-boundary', 此处切记不要加，否则会造成后端报错  Required request part 'file' is not present 
          'token':token
          }"
          name="file"//此处默认为file
          class="upload-demo"
          @on-success="handleSuccess"
          :on-error="handleAvatarSuccess"
          :limit="3"
          :on-progress="beforeAvatarUpload"
        >
<!--:auto-upload="false"-->
          <!--          :http-request="replaceRes"-->
          <span v-if="jinDu">
            <el-progress style="width: 245px; height: 19px" :text-inside="true" :stroke-width="20"
                         :percentage="percentage"/>
          </span>
          <span v-if="isUpload" style="color: #59c2c7;cursor:pointer;"
                @click="uploadChangeValue">导入学生学籍信息</span>
          <template #tip>
            <span style="color: #ff8282; margin-left: 20px">{{ importText }}</span>
          </template>
        </el-upload>
<script lang="ts" setup>

//此处后端穿了一个流给前端，所以需要解析一下，然后赋值给一个按钮，在点击时候才下载！！！
const handleSuccess = (response: any) => {
  console.log(response)
  if (Object.values(response.headers)[0] == 'application/vnd.ms-excel;charset=UTF-8') {
    const url = window.URL.createObjectURL(new Blob([response.data]));
    // 创建a标签，并隐藏a标签
    let link = document.createElement('a')
    link.style.display = 'none'
    // a标签的href属性指定下载链接
    link.href = url
    //setAttribute() 方法添加指定的属性，并为其赋指定的值
    // 后缀格式.csv/.xsls要和需要和后端返回格式相同，这里以.csv为例
    link.setAttribute('download', '文件名称.xlsx')
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }
};


//此处用于实时监听进度条进度
const beforeAvatarUpload = (event: any) => {
  let loadProgress = Math.floor(event.percent); //这就是当前上传的进度
  //可以进行其他逻辑
  percentage.value = loadProgress;
  importText.value = "学籍信息导入中……";
  if (percentage.value == 100) {
    importText.value = "学籍导入成功！"
  }
};
</script>

    @PostMapping("import")
    @ApiOperation("导入")
    @RequiresPermissions("student:student:import")
    @ApiImplicitParam(name = "file", value = "文件", paramType = "query", dataType = "file")
    public void importExcel(@RequestParam("file") MultipartFile file, HttpServletResponse response) throws Exception {
        UserDetail userDetail = SecurityUser.getUser();
        //保存所有的表单信息、如果表达有错误、将返回给客户端
        if (userWithErrorListInMap == null) {
            userWithErrorListInMap = new HashMap<>();
        }
        //每次都清空数据
        userWithErrorListInMap.put(userDetail.getId(), new ArrayList<>());

        ZsRef<Boolean> hasError = new ZsRef<>();
        new ExcelServiceListener<StudentExcel, StudentEntity>(studentService, file.getInputStream()) {
            private List<RegionEntity> regionList;

            /**
             * 地区编码 去掉末尾的数字0, 用于判断权限
             */
            private String userRegionCodeForPermission;

            private SchoolEntity schoolForPermission;

            @Override
            public void invoke(StudentExcel data, AnalysisContext context) {

                if (regionList == null) {
                    regionList = regionService.selectList(new HashMap<>());
                }
                if (userDetail.getRegionCode() != null) {
                    //去掉地区编码后面的0
                    userRegionCodeForPermission = userDetail.getRegionCode().replaceAll("0+?$", "");
                }

                if (userDetail.getSchoolCode() != null) {
                    schoolForPermission = schoolService.selectByParams("schoolCode", userDetail.getSchoolCode());
                }
                // 校验姓名
                if (data.getName() == null) {
                    hasError.value = true;
                    data.setName(data.getName() + "##名字不能为空, 长度最多四汉字");
                }
                // 校验性别
                if (data.getGender() == 2) {
                    hasError.value = true;
                    data.setGenderStr(data.getGenderStr() + "##性别只能是（男、女）中的一个");
                }

                // 校验身份证号
                if (isEmpty(data.getIdCard()) || data.getIdCard().length() != 18) {
                    hasError.value = true;
                    data.setName(data.getName() + "##身份证长度18位");
                }

                if (isEmpty(data.getNation())) {
                    hasError.value = true;
                    data.setNation(data.getNation() + "##民族不能为空");
                }

                // ************************ 校验地区 *********************************
                // 判断地区表中是否包含含这一项
                RegionEntity region1 = null, region2 = null;
                for (RegionEntity item : regionList) {
                    if (data.getRegion1() != null && data.getRegion1().contains(item.getName())) {
                        region1 = item;
                    }
                    if (data.getRegion2() != null && data.getRegion2().contains(item.getName())) {
                        region2 = item;
                    }
                }
                // RegionEntity region = regionList.stream().filter(r -> r.getName().contains(data.getRegion())).findFirst().orElse(null);
                if (region1 == null) {
                    hasError.value = true;
                    data.setRegion1(data.getRegion1() + "##城市不存在");
                }

                if (region2 == null) {
                    if (data.getRegion1().contains("济源")) {
                        //济源没有区县
                    } else {
                        hasError.value = true;
                        data.setRegion2(data.getRegion2() + "##区县不存在");
                    }
                }

                if (region1 != null && region2 != null) {
                    data.setRegionCode(region2.getCode());
                    //判断地区和学校 是否具备权限
                    if (isNotEmpty(userDetail.getRegionCode())) {
                        if (String.valueOf(data.getRegionCode()).startsWith(userRegionCodeForPermission)) {
                            //具备权限
                        } else {
                            hasError.value = true;
                            data.setRegion2(data.getRegion2() + "##不具备该地区的权限");
                        }
                    }
                }

                //判断是否具备该学校的权限
                if (isNotEmpty(userDetail.getSchoolCode())) {
                    if (isEquals(schoolForPermission.getName(), data.getSchoolName())) {
                        //具备权限
                    } else {
                        hasError.value = true;
                        data.setSchoolName(data.getSchoolName() + "##不具备该学校的权限");
                    }
                } else {
                    //不需要判断学校权限
                }

                if (isEquals(hasError.value, true)) {
                    userWithErrorListInMap.get(userDetail.getId()).add(data);
                } else {
                    //没有错误的才添加
                    super.list.add(data);
                }
            }

            @Override
            public void doAfterAllAnalysed(AnalysisContext context) {
                if (isEquals(hasError.value, true)) {
                    //  有错误, 不入库
                } else {
                    studentService.saveStudentWidthSchoolAndClass(super.list);
                }
            }
        }.start(2);

        if (Objects.equals(hasError.value, true)) {
            String errorFileName = file.getOriginalFilename().replace(".xlsx", "错误提示.xlsx");
            export(response, errorFileName, userWithErrorListInMap.get(userDetail.getId()));
        } else {
            PrintWriter pw = response.getWriter();
            //逻辑删除导入学籍时学籍不存在的学校班级（当前学期）
            schoolService.deleteBySchoolCode();
            gradeClassService.deleteByClassCode();
            //恢复导入学籍时学籍存在但逻辑删除的学校班级（当前学期）
            schoolService.updateBySchoolCode();
            gradeClassService.updateByClassCode();
            pw.write(ZsJson.toJson(new Result<>()));
            pw.close();
        }
        System.out.println("excel解析完成");
    }

下载一个后端返回的流文件

注意跨域问题

后端解决跨域问题

const downLoadExport=()=>{
  axios({
    method: 'post',
    url: baseUrl+"/electric/electricassets/download/assets",
    headers: {
      "Content-Type": "application/json;charset=UTF-8",
      "token":getToken()
    },
    responseType: 'blob'
  }).then(response => {
    if (Object.values(response.headers)[0]=='application/vnd.ms-excel;charset=UTF-8'){
      const url = window.URL.createObjectURL(new Blob([response.data]));
      // 创建a标签，并隐藏a标签
      let link = document.createElement('a')
      link.style.display = 'none'
      // a标签的href属性指定下载链接
      link.href = url
      //setAttribute() 方法添加指定的属性，并为其赋指定的值
      // 后缀格式.csv/.xsls要和需要和后端返回格式相同，这里以.csv为例
      link.setAttribute('download',   '文件名称.xlsx')
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  })
}
内心的一片海
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element-UI中Upload上传文件前端缓存处理示例
10-17
主要介绍了Element-UI中Upload上传文件前端缓存处理示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
el-upload 上传文件之后 实现文件流下载
callBack_____的博客
06-10 5036
el-upload 上传文件之后 实现文件流下载 通过on-preview 的参数获取当前点击文件的参数 ，并调用接口 返回文件流 通过Blob对象 实现文件流下载文件 这样下载的文件会有问题，会造成文件的格式不对，是因为下载的时候没有指定下载的文件类型想要下载所有类型的文件，直接在请求的时候（axios）加上 responseType: 'blob' 就可以了...
el-upload组件如何上传blob格式的url地址视频
最新发布
MISS_zhang_0110的博客
04-22 439
el-upload是Element UI中用于文件上传的组件，通常用于上传本地文件。如果需要上传url地址而不是本地文件也是可以的，需要自己封装一下。
el-upload的自动上传文件
qq_41429765的博客
02-26 1413
<el-upload name="multipartFiles" //设置上传文件的file参数值类似于formData.append("multipartFiles":file) :on-exceed="handleExceed"//拦截触发非法验证提示 class="uploadaDVen" multiple :action="imgUrls" //上传文件的地址 :on-success="handleVideoSuccessInside.
el-upload 文件上传配置（自动）
qq_59224836的博客
04-25 275
el-upload 文件上传配置（自动）
vue el-upload 大文件切片上传 带进度条
放弃不难，但坚持一定很酷！
12-05 1472
项目中经常会遇到文件 size 特别大的 动不动就 1g、2g 这样在上传过程中就会文件过大，超出服务端的请求大小限制；请求时间过长，请求超时；传输中断，必须重新上传导致前功尽弃；
vue获取文件流
super帅的博客
07-04 1139
vue获取文件流
vue 使用 el-upload 上传文件(自动上传/手动上传)
localhost
08-11 3863
vue 使用 el-upload 上传文件(自动上传/手动上传)
关于el-upload组件自动上传，添加图片时图片会弹一下的问题
l5410的博客
06-13 1197
在使用el-upload上传图片时，遇到了自动上传时会出现图片闪一下的问题。
el-upload上传文件详解
yqqdmy的博客
11-03 4077
官网中el-upload的自动上传属性默认是true，因此想要实现自动上传配置以下参数即可name:若后端接口上传的文件参数为file，即name='file'可配合文件上传成功的钩子on-success，实现图片回显,on-success的函数的response即后端上传接口返回200状态码的内容。
【前端相关】elementui使用el-upload组件实现自定义上传
热门推荐
No8g攻城狮的博客
05-24 2万+
官方的描述是说 覆盖默认的上传行为，可以自定义上传的实现，类型是 function，可选值与默认值都省略。经过我的探索，我发现它可以接收一个参数，这个参数保存了你文件上传的对象。elmentui 中的upload默认的提交行为是通过 action 属性中输入的 url 链接，提交到指定的服务器上。先定义了一个 el-upload标签，在里面先把自动上传文件关闭，由于action是必填项，所以就塞了个#进去，在。在这个函数里面，我实现了自定义文件上传的请求。上传文件之前的钩子，参数为上传的文件，若返回。
layui(1.0.9)文件上传upload,前后端的实例代码
10-16
今天小编就为大家分享一篇layui(1.0.9)文件上传upload,前后端的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
antd Upload 文件上传的示例代码
10-17
主要介绍了antd Upload 文件上传的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue+el_upload实现文件上传的方式.doc
02-01
"Vue+el_upload实现文件上传的方式" ...使用Vue.js和el_upload可以轻松实现文件上传和下载的功能。通过组合这两个技术栈，我们可以轻松地上传和下载文件，并且可以根据不同的需求选择不同的上传方式。
jspupload.rar_jspuplo_jspupload source_下载文件
09-23
一个上传下载的java类库源程序，功能十分强大，能够支持各种格式的上传下载文件
后端返回的文件流下载成excel文件
小康同学的博客
09-02 1009
getReport(str).then(res=>{ let blob = new Blob([res], {type: 'data:application/vnd.ms-excel;base64;charset=utf-8'}); let downloadElement = document.createElement('a'); let href = window.URL.createObjectURL(blob); //创建下载的链...
vue学习（五）el-upload 组件自动上传
然而老干妈早就看穿了一切
02-28 3302
demo直接提交类型：data带参数 <el-table-column label="数据" align="center" prop="data"> <template slot-scope="scope"> <el-upload ...
前端文件上传下载与预览，文件流下载文件流预览文件流上
guojixin12的博客
05-18 585
element的 el-upload实现的文件上传文件下载文件预览，文件流。该方法可以进行多文件上传。
Flask上传文件的前后端写法
08-08
### 回答1： 前端页面代码(HTML): ```html <form action="/upload" method="POST" enctype="multipart/form-data"> <input type="file" name="file"> <input type="submit" value="上传"> </form> ``` 后端代码(Flask): ```python from flask import Flask, request app = Flask(__name__) @app.route('/upload', methods=['POST']) def upload(): file = request.files['file'] file.save('path/to/save/file') return '文件上传成功' ``` 注意: 上传文件保存的路径需要是绝对路径。 ### 回答2： Flask是一个轻量级的Python Web开发框架，提供了简单而灵活的方式来处理文件上传。文件上传涉及到前后端两个方面的代码编写，下面是关于Flask文件上传的前后端写法。 前端写法： 1. 在HTML表单中添加一个文件上传输入框，并设置相应的name属性以便后端处理。 `<input type="file" name="file">` 2. 使用JavaScript监听文件上传输入框的change事件，获取选中的文件对象。 ``` const fileInput = document.querySelector('input[type="file"]'); fileInput.addEventListener('change', (event) => { const file = event.target.files[0]; // 处理文件... }); ``` 3. 将选中的文件对象以FormData的形式发送到后端。 ``` const fileInput = document.querySelector('input[type="file"]'); const formData = new FormData(); formData.append('file', fileInput.files[0]); // 发送FormData到后端... ``` 后端写法： 1. 在Flask中导入相关模块。 ``` from flask import Flask, request from werkzeug.utils import secure_filename ``` 2. 创建Flask应用。 ``` app = Flask(__name__) ``` 3. 设置文件上传的保存路径。 ``` app.config['UPLOAD_FOLDER'] = '/path/to/uploads' ``` 4. 定义文件上传的路由。 ``` @app.route('/upload', methods=['POST']) def upload_file(): file = request.files['file'] if file: filename = secure_filename(file.filename) file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename)) # 文件上传成功的处理逻辑... else: # 文件上传失败的处理逻辑... ``` 上述代码中的`/path/to/uploads`是文件保存的路径，可以根据需要进行修改。在后端的文件上传路由中，首先从请求中获取文件对象，然后使用`secure_filename()`函数确保文件名的安全性，并将文件保存到指定的路径中。最后，根据文件上传的成功或失败情况处理相应的逻辑。 需要注意的是，Flask默认的文件上传大小限制为16MB。如果需要上传更大的文件，可以通过配置`MAX_CONTENT_LENGTH`来修改。另外，还可以添加文件类型、大小等验证逻辑以增加安全性。 ### 回答3： Flask是一个轻量级的Python Web框架，用于构建Web应用程序。关于Flask上传文件的前后端写法，涵盖了前端页面展示和后端处理两部分。 前端页面展示： 1. 在HTML页面中，需要添加一个表单元素用于文件上传，如<form>标签，并设置enctype属性为"multipart/form-data"。 2. 在表单中添加一个<input>标签，并设置type属性为"file"，用于用户选择要上传的文件。 3. 将表单元素和输入框包含在一个适当的位置，比如一个div元素中，以便于布局和样式设置。 后端处理： 1. 在Flask的应用程序中，需要引入"request"模块，该模块用于处理上传的文件。 2. 使用@app.route装饰器定义一个路由，指定接收上传文件的URL地址，并设置方法为POST。 3. 在对应的视图函数中获取上传的文件，通过request.files.get("file")即可获取到上传的文件对象。 4. 通过文件对象的save()方法，将文件保存到服务器上的指定位置。可以为每个上传的文件设置一个保存路径，比如app.config['UPLOAD_FOLDER']。 5. 针对上传文件的需求，可以进行文件格式、大小、后缀等验证和处理，如通过文件对象的filename属性获取文件的名称和后缀，通过文件对象的content_type属性获取文件的MIME类型等。 以上是Flask上传文件的简要介绍，具体的实现细节和业务逻辑根据具体需求和应用场景的不同可能会有所差异。这只是一个简单的示例，可以根据实际情况进行扩展和定制。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值