ElementUI+SpringBoot带普通类型参数的文件上传

Posted 2023-03-04 莉妮可丝的猫

文件上传

ElementUi

html

            <!-- 上传附件 -->
			<div class="fj-add-btn ts02s" @click="dialogVisible = true">添加文件</div>
            <el-dialog title="附件上传" :visible.sync="dialogVisible" width="30%" :modal="false" class="thisblack-bgc">
                <el-upload class="upload-demo" :before-upload="beforeAvatarUpload" ref="upload" action="#"
                    :http-request="handleUpload" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false">
                    <div slot="trigger" size="small" type="primary" class="add-file-btn">+</div>
                    <div slot="tip" class="el-upload__tip">只能上传word、excal、pdf文件，且不超过5mb</div>
                </el-upload>
                <span slot="footer" class="dialog-footer">
                    <el-button size="small" round type="primary" @click="dialogVisible3 = false">确定</el-button>
                    <el-button size="small" round @click="cancelUpload(); dialogVisible3 = false">取 消</el-button>
                </span>
            </el-dialog>

data

        data: () => (
            fileList: [],
            dialogVisible:false,
        )

methods

		// axios
		...mapActions('file', ['upload']),
        /**
         * 上传文件
         */
        async submitUpload() 
            // 执行自定义的handleUpload()（猜测）
            this.$refs.upload.submit();
            // 没有文件，返回
            if (this.fileList.length == 0) 
                return
            
            // 添加文件到FormData
            var formData = new window.FormData();
            this.fileList.forEach(function (file) 
                formData.append('file', file); // 上传多个文件，需遍历
            )
            // 添加普通类型数据
            formData.append("type", 0)
            // 上传
            const  code, message, data  = await this.upload(formData)
            if (code === 200) 
                ElementUI.Message.success('上传成功')
            
            // 清空
            this.fileList = []
            this.$refs.upload.clearFiles();
        ,
        /**
         * 覆盖默认的上传行为，自定义上传
         * @param * raw
         */
        handleUpload(raw) 
        	// 获取添加的文件到fileList
            this.fileList.push(raw.file);
        ,
		/**
         * 文件上传前检查
         * @param * file 
         */
        beforeAvatarUpload(file) 
            let pattern = /^.*(\\.doc|\\.docx|.xls|.xlsx|.pdf)$/
            const isJPG = pattern.test(file.name);
            const isLt5M = file.size / 1024 / 1024 / 1024 < 5;
            if (!isJPG) 
                this.$message.error('上传的文件只能是 Word、Excal和PDF !');
            
            if (!isLt5M) 
                this.$message.error('文件大小不能超过 5MB!');
            
            return isJPG && isLt5M;
        ,
        /**
         * 取消上传后执行
         */
        cancelUpload() 
            this.fileList = []
            this.$refs.upload.clearFiles();
        ,
        /**
         * 上传成功后执行
         */
        handFileSuccess(file) 
            this.fileList = []
            this.$refs.upload.clearFiles();
        ,
        /**
         * 文件列表移除文件时执行
         */
        handleRemove(file, fileList) 
            this.fileList = fileList
        ,

axios

		/**
         * 上传文件
         * @param * state 
         * @param * formData 
         * @returns 
         */
        async upload(state, formData) 
            return await axios(
                url: '/file/upload',
                method: 'POST',
                data: formData
            )
        ,

css

// 修改el-dialog样式
::v-deep .el-dialog__body 
    padding: 10px 20px;


::v-deep .el-dialog__header 
    padding: 20px 20px 0px;


// 文件上传按钮
.add-file-btn 
    width: 30px;
    height: 30px;
    text-align: center;
    font-size: 20px;
    position: absolute;
    bottom: 20px;
    border: 1px dashed #409EFF;


// el-dialog背景失效替代
.thisblack-bgc 
    background-color: #00000049;

SpringBoot

controller

    /**
     * 上传文件
     * @param files
     * @param competitionId
     * @param type
     * @return
     * @throws IOException
     */
    @PostMapping("/file/upload")
    public ResponseResult upload(@RequestParam(value = "file") MultipartFile[] files,
                                 @RequestParam(value = "type")Integer type) throws IOException 
        return fileService.upload(files, type);
    

serviceImpl

	@Transactional(rollbackFor = Exception.class)
    public ResponseResult upload(MultipartFile[] files, Integer type) throws IOException 
        if (files.length == 0) 
            // 自己写全局异常
            throw new GlobalException(ResponseResultEnum.FILE_ERROR);
        
        /**
         * 上传文件
         */
        for (MultipartFile file : files) 
            // 自己到全局常量写路径
            String filePath = "D:/Project/resources/static/file/";
            File newFile = new File(filePath + file.getOriginalFilename());
            if (!newFile.getParentFile().exists()) 
                newFile.getParentFile().mkdirs();
            
            file.transferTo(newFile);
            /**
             * TODO:存储数据库
             */
        
    

application.yml

spring:
  // 静态资源访问真实路径
  web:
    resources:
      static-locations: file:D:/Project/resources/static/file
  // 静态资源访问映射路径
  mvc:
    static-path-pattern: /resources/**