文件上传与下载（一）

旧城等待， 2023-02-16 06:47 67阅读 0赞

一、前端：

1、request请求util：

import axios from 'axios'
    // 配置session跨域
    axios.defaults.withCredentials = true
    import { Message, MessageBox } from 'element-ui'
    import store from '../store'
    import { getToken } from '@/utils/auth'
    
    // 创建axios实例
    const service = axios.create({
      baseURL: process.env.BASE_API, // api的base_url
      timeout: 5000 // 请求超时时间
    })
    
    // request拦截器
    service.interceptors.request.use(config => {
      if (store.getters.token) {
        config.headers['token'] = store.getters.token // 让每个请求携带自定义token 请根据实际情况自行修改
      }
      //文件上传
      if (config.method === 'post') {
        if (config.upload) { // 上传图片则添加headers
          config.headers['Content-Type'] = 'multipart/form-data'
          config.timeout = 360000
        } 
      }
      return config
    }, error => {
      // Do something with request error
      console.log(error) // for debug
      Promise.reject(error)
    })
    
    // respone拦截器
    service.interceptors.response.use(
      response => {
      /**
      * code为非20000是抛错 可结合自己业务进行修改
      */
        const res = response.data
        if (res.code !== 200 && res.code !=300) {
          Message({
            message: res.message,
            type: 'error',
            duration: 5 * 1000
          })
    
          // 401 token失效
          if (res.code === 401) {
            // MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
            //   confirmButtonText: '重新登录',
            //   cancelButtonText: '取消',
            //   type: 'warning'
            // }).then(() => {
            //   store.dispatch('FedLogOut').then(() => {
            //     location.reload()// 为了重新实例化vue-router对象 避免bug
            //   })
            // })
            store.dispatch('FedLogOut').then(() => {
              location.reload()// 为了重新实例化vue-router对象 避免bug
            })
          }
          return Promise.reject('error')
        } else {
          return response.data
        }
      },
      error => {
        console.log('err' + error)// for debug
        Message({
          message: error.message,
          type: 'error',
          duration: 5 * 1000
        })
        return Promise.reject(error)
      }
    )
    
    export default service

2、api：

import request from '@/utils/request'
    
    export function upload(formDatas) {
      return request({
        url: '/upload/upload',
        method: 'post',
        upload: true,
        data: formDatas
      })
    }

3、页面：

（1）单独文件上传

<template>
      <div>
        <div>
        
          
          <el-button @click="exportTemplate">下载</el-button>
        </div>
        <div class="upload_btn">
          <span>上传图片</span>
          <input
            type="file"
            multiple
            accept="image/gif, image/jpeg, image/png, image/jpg"
            @change="uploadImg($event)"
          />
        </div>
      </div>
    </template>
    
    <script>
    import { upload, download } from "@/api/upload";
    export default {
      methods: {
        uploadImg(ev) {
          var files = ev.target.files;
          let formData = new FormData();
    
          if (!files || files.length === 0) return;
          for (var i = 0; i < files.length; i++) {
            formData.append("files", files[i]);
          }
    
          upload(formData)
            .then(res => {
              alert("上传成功");
            })
            .catch(() => {});
        },
        exportTemplate() {
            debugger
          let baseURL = process.env.BASE_API;
          let url = baseURL + "file/download";
          alert(url)
          window.location.href = url;
        },
        exportTemplate1() {
          //download().then(res => {});
          download()
            .then(res => {
              //     debugger;
              //   if (!res) {
              //     return;
              //   }
              //   const url = window.URL.createObjectURL(new Blob([res]));
              //   const link = document.createElement("a");
              //   link.style.display = "none";
              //   link.href = url;
              //   link.setAttribute("download", "user.xlsx");
              //   document.body.appendChild(link);
              //   link.click();
            })
            .catch(err => {
              // this.$message.error(err);
            });
        }
      }
    };
    </script>

（2）还可以把选择文件和上传分开为两步、并且formData携带其他的参数：

<template>
      <div class="container">
        <el-row class="file-div">
          <el-form>
            <el-form-item label="附件:" label-width="120px">
              
              <el-row>
                <el-col :span="8" class="file-operate">
                  <label class="button text-overflow" for="messageFile">
                    <Icon type="ios-cloud-upload-outline" size="16" />
                    选择文件
                  </label>
                  <input
                    :disabled="isDisable"
                    multiple
                    ref="messageFile"
                    @change="fileHandler()"
                    type="file"
                    id="messageFile"
                    style="position: absolute; clip: rect(0 0 0 0)"
                    accept=".png, .jpeg, .jpg, application/pdf, .txt, .xls, .xlsx, .doc, .docx, .wps, .rtf, .ppt, .pptx, .pps, .ppsx,.mp4,.mp3,.zip"
                  />
                </el-col>
                <el-col :span="4">
                  <el-button
                    @click="upload"
                    :disabled="isDisable"
                    size="small"
                    class="submit-btn"
                    >上传</el-button
                  ></el-col
                >
              </el-row>
    
              
              <el-row v-for="(item, index) in files" :key="index">
                <el-col :span="12"
                  ><span class="file-name">{
       { item.fileName }}</span></el-col
                >
                <el-col :span="2">
                  <a @click="downloadFile(item.downloadUrl)" v-if="item.downloadUrl"
                    >下载</a
                  >
                </el-col>
                <el-col :span="2">
                  <a @click="delFile(item.fileName)" v-if="!isDisable"
                    >删除</a
                  ></el-col
                >
              </el-row>
            </el-form-item>
          </el-form>
        </el-row>
      </div>
    </template>
    <script>
    export default {
      props: { id: {}, isDisable: { default: false }},
      data() {
        return {
          files: [],
          selectFiles: []
        };
      },
      created() {
        if (this.id != null) {
          //id不会空，后台查询回显
          this.getFiles();
        }
      },
      watch: {
        //变化则传给后台
        files: {
          handler: function() {
            var _this = this;
            this.$emit('fileChange', _this.files);
          },
          deep: true
        }
      },
      methods: {
        //回显
        getFiles() {
          this.$api['user/getFiles']({
            formId: this.id
          }).then(data => {
            this.files = data;
          });
        },
        //change
        fileHandler() {
          let currFiles = this.$refs.messageFile.files;
          for (let i = 0; i < currFiles.length; i++) {
            this.selectFiles.push(currFiles[i]);
          }
          for (let i = 0; i < currFiles.length; i++) {
            this.files.push({ fileName: currFiles[i].name });
          }
        },
        //上传
        async upload() {
          let formData = new FormData();
          formData.append('formId', this.id);
    
          //此次需要上传的文件
          let fileSise = 0;
          for (let i = 0; i < this.selectFiles.length; i++) {
            formData.append('files', this.selectFiles[i]);
            fileSise += this.selectFiles[i].size;
          }
          if (fileSise >= 104857600) {
            this.$Message.error('文件总和不得大于100M');
            document.querySelector('#messageFile').reset();
            return;
          }
          //已有的文件
          let fileNameContextIdMap = new Map();
          this.files.forEach(item => {
            let contextId = item.contextId;
            if (contextId != null) {
              fileNameContextIdMap.set(item.fileName, contextId);
            }
          });
          //map转json
          if (fileNameContextIdMap.size > 0) {
            let obj = Object.create(null);
            for (let [k, v] of fileNameContextIdMap) {
              obj[k] = v;
            }
            formData.append('fileNameContextIdMap', JSON.stringify(obj));
          }
          //上传接口
          await this.$api['file/uploadFile'](formData, {
            headers: {
              'Content-Type': 'multipart/form-data'
            },
            timeout: 300000
          })
            .then(data => {
              // this.$Message.success({
              //   content: '上传成功!',
              //   duration: 3,
              //   closable: true
              // });
            })
            .finally(() => {
              this.selectFiles = [];
              this.getFiles();
            });
        },
        //下载
        downloadFile(downloadFile) {
          let downloadElement = document.createElement('a');
          let href = downloadFile;
          downloadElement.href = href;
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象
        },
        //删除文件
        delFile(fileName) {
          this.files = this.files.filter(item => {
            return item.fileName !== fileName;
          });
          //待上传的文件
          let handleFiles = [];
          for (let i = 0; i < this.selectFiles.length; i++) {
            let selectFilName = this.selectFiles[i].name;
            if (fileName != selectFilName) {
              handleFiles.push(this.selectFiles[i]);
            }
          }
          this.selectFiles = handleFiles;
        }
      }
    };
    </script>

注意：（1）以上下载是前端请求get请求下载文件到本地，如果是post请求，需要这样：

在请求参数后加：

{ responseType: 'blob' }

再构造下载：

let downloadElement = document.createElement('a');
                let blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=utf-8' });
                let href = URL.createObjectURL(blob);
                downloadElement.href = href;
                document.body.appendChild(downloadElement);
                downloadElement.click(); //点击下载
                document.body.removeChild(downloadElement); //下载完成移除元素
                window.URL.revokeObjectURL(href); //释放掉blob对象

如我的：

// 导出
        exportExcel() {
          this.$Modal.confirm({
            title: '导出提示',
            content: `是否导出？`,
            onOk: () => {
              let params = {
                provinceId: this.searchData.provinceId,
                cityId: this.searchData.cityId,
                districtId: this.searchData.districtId
              };
              this.$api['user/exportExcel'](params,{ responseType: 'blob' }).then(res => {
                let downloadElement = document.createElement('a');
                let blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=utf-8' });
                let href = URL.createObjectURL(blob);
                downloadElement.href = href;
                document.body.appendChild(downloadElement);
                downloadElement.click(); //点击下载
                document.body.removeChild(downloadElement); //下载完成移除元素
                window.URL.revokeObjectURL(href); //释放掉blob对象
              });
            }
          });
        },

（2）清空file文件的方法：不可以使用$refs的reset方法，可以使用

this.$refs.batchImport.value = '';

或者

ev.target.value = '';

二、后端：

![20200609110257547.png][]

1、不拦截下载接口：

/**白名单
         * 需要放行的URL
         */
        private static final String[] AUTH_WHITELIST = {
                "/v2/api-docs",
                "/swagger-resources",
                "/swagger-resources/**",
                "/configuration/ui",
                "/configuration/security",
                "/swagger-ui.html",
                "/static",
                "/static/diagram-viewer",
                "/static/**",
                "/index.html",
                "/code/**",  //验证码
                "/user/logout/**",
                "/file/download/**"
    
        };

2、接口：

（1）接收文件数组

package com.demo.rest;
    import com.demo.dto.JWTUserDTO;
    import com.demo.dto.ResponseMessage;
    import org.springframework.security.core.context.SecurityContextHolder;
    import org.springframework.web.bind.annotation.*;
    import org.springframework.web.multipart.MultipartFile;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.*;
    import java.net.URLEncoder;
    
    @RequestMapping("/file")
    @RestController
    public class UploadController {
    
       //上传
        @RequestMapping("/upload")
        public ResponseMessage uploadFile(@RequestBody MultipartFile[] files) throws IOException {
            JWTUserDTO jwtUser = (JWTUserDTO) SecurityContextHolder.getContext().getAuthentication().getPrincipal();
            for (MultipartFile file : files) {
                long size = file.getSize();
                String fileName = file.getOriginalFilename();
                System.out.println(fileName + " " + size);
            }
            return ResponseMessage.success("上传成功");
        }
    
    
        //下载工程模板文件到前端浏览器
        @RequestMapping("/download")
        public ResponseMessage download(HttpServletResponse response, HttpServletRequest request) {
            String fileName = "user.xlsx";
            File file = new File(this.getClass().getClassLoader().getResource("")
                    .getPath() + File.separator + "templates" + File.separator + "user.xlsx");
            response.setContentType("application/octet-stream");
            response.addHeader("Content-Disposition", "attachment;filename=" + fileName);
            byte[] buffer = new byte[1024];
            FileInputStream fis = null;
            BufferedInputStream bis = null;
            try {
                fis = new FileInputStream(file);
                bis = new BufferedInputStream(fis);
                OutputStream os = response.getOutputStream();
                int i = bis.read(buffer);
                while (i != -1) {
                    os.write(buffer, 0, i);
                    i = bis.read(buffer);
                }
                bis.close();
                fis.close();
            } catch (Exception e) {
                e.printStackTrace();
                return ResponseMessage.success("导出失败");
            } finally {
                try {
                    bis.close();
                    fis.close();
                } catch (Exception e) {
                    return ResponseMessage.success("导出失败");
                }
            }
            return ResponseMessage.success("导出成功");
        }
    }

（2）只接收一个文件，去掉数组即可：

@PostMapping("upload")
    	public ResponseMessage uploadFile(@RequestParam("file") MultipartFile file) throws IOException {
            String result = fileService.uploadFile(file);
    		if (StringUtils.isBlank(result)){
    			return ResponseMessage.error("上传失败");
    		}else{
    			return ResponseMessage.success("上传成功",result);
    		}
    	}

（3）如果还携带其他参数：使用@ModelAttribute接收对象

@PostMapping(value = "/uploadFile")
        public ResponseMessage uploadFile(@ModelAttribute MaterialVO materialVO)
    
    
    
    
    
    public class MaterialVO{
       private Integer formId;
       private MultipartFile[] files;
       ...get set方法...
    }

[20200609110257547.png]: https://img-blog.csdnimg.cn/20200609110257547.png