上传文件的大小设置

环境

• VUE
• spring boot项目
• Nginx

文件大小限制

1. application.yml配置

spring:
  application:
    name: xxx
  servlet:
    multipart:
      enabled: true #是否启用http上传处理
      max-request-size: 5MB #最大请求文件的大小
      max-file-size: 5MB #设置单个文件最大长度

2. Nginx配置

vi /usr/local/nginx/conf/nginx.conf

修改http下的client_max_body_size为5M（你所允许的最大文件大小）

3. VUE代码限制

//使用的是ElementUI的组件
 
<el-upload
                :before-upload="beforeAvatarUpload"
                :on-success="onSuccess"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :action="imgActionURL"
                :file-list="fileList"
                :disabled="uploadDisable"
                list-type="picture-card">
                <i class="el-icon-plus"/>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img
                  :src="dialogImageUrl"
                  width="100%"
                  alt="">
              </el-dialog>

 // 文件上传成功时的钩子
    onSuccess(res, file, fileList) {
      this.fileList = fileList
      if (res.code === 200) {
        this.fileList[this.fileList.length - 1].url = this.fileList[
          this.fileList.length - 1
        ].response.data
      } else {
        this.$message.error('上传失败请重新上传')
      }
    },
    // 上传文件之前的钩子
    beforeAvatarUpload(file) {
      let isJPG = file.type === 'image/jpeg'
      let isPNG = file.type === 'image/png'
      let isLt5M = file.size / 1024 / 1024 < 5
      if (this.fileList.length > 4) {
        this.$message.error('最多只能上传5张图片!')
        return false
      }
      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG或PNG 格式!')
        return false
      }
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过 5MB!')
        return false
      }
    },
    handleRemove(file, fileList) {
      this.fileList = fileList
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },

3. Controller代码

   @RestController
   @RequestMapping("/upload")
   public class UploadController {
   
       @Value("${file.xxImg}")
       private String xxImg;
       @Value("${file.xx}")
       private String service;
   
       @RequestMapping(value = "/uploadImg", method = RequestMethod.POST)
       public CommonResult<Object> uploadImg(MultipartFile file) {
   
           Calendar now    =    Calendar.getInstance();
           String year = Integer.toString(now.get(Calendar.YEAR));
           String month = Integer.toString(now.get(Calendar.MONTH)+1);
           String savePath = xxImg+ "Rectify/" + year + "/" + month + "/";
           InputStream is = null;
           OutputStream os = null;
           try {
               String suffix = file.getOriginalFilename();
               String fileName = Utils.getUUID() + suffix.substring(suffix.lastIndexOf("."));
               System.out.println(fileName);
               File tempFile = new File(savePath);
               // 判断路径是否存在,不存在就创建一个
               if (!tempFile.exists()) {
                   tempFile.mkdirs();
               }
               is = file.getInputStream();
               os = new FileOutputStream(tempFile.getPath() + File.separator + fileName);
               byte[] bs = new byte[1024];
               int len = 0;
               while ((len = is.read(bs)) != -1) {
                   // 写入输出文件
                   os.write(bs, 0, len);
               }
               String resUrl = service + savePath + fileName;
               return CommonResult.success(resUrl);
           } catch (IOException e) {
               e.printStackTrace();
               return CommonResult.forbidden(null);
           } finally {
               // 完毕，关闭所有链接
               try {
                   os.close();
                   is.close();
               } catch (IOException e) {
                   e.printStackTrace();
               }
           }
       }