Vue + Element(文件上传控件)+ SpringBoot 文件上传功能

超、凢脫俗 2023-10-10 13:09 70阅读 0赞

## 文件上传效果展示: ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70 1][]

文件上传效果预览

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70 2][]

文件上传删除

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70 4][]

## Vue 前端核心代码 ##

<el-form-item label="文件上传" >
            <el-upload drag multiple
     name="multipartfiles" 
     ref="upload"
     :limit=1  
     :action="imageAction" 
     :on-preview="handlePreview" 
     :on-remove="handleRemove" 
     :file-list="fileList" 
     :beforeUpload="beforeAVatarUpload" 
     :on-exceed = "onExceed"
     :onError="uploadError"
     :onSuccess="uploadSuccess" 
     :auto-upload="true">
     <i class="el-icon-upload"></i>
     <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
     <div class="el-upload__tip" slot="tip">只能上传'jpg/png/jpeg/gif'</div>
    </el-upload>
    
            </el-form-item>

export default{
        name: 'new_house',
         data () {
          return {
            imageAction:'http://192.168.1.74:8014/minio/api/upload/file/up',
            fileList: [],
          }
        },
        methods: {
           handleRemove (file, fileList) {
            if (file.status === 'success') {
               var params = {'filePath': file.response.datas.filePath}
              this.$axios({
                url: "/api/upload/file/del",
                method: 'post',
                headers:{
                    'Content-Type':'application/json;charset=utf-8'      //改这里就好了
                },
                data: params
              }).then(res => {
                this.$message.success('删除图片成功！')
                this.fileList = []
                this.uploadFile.fileName = ''
                this.uploadFile.filePath = ''
                this.uploadFile.fileType =''
                this.uploadFile.fileSize = ''
              }).catch(function (error) {
                console.log(error)
              })
            }
          },
          handlePreview (file) {
            if (file.status === 'success') {
              window.open(file.response.datas.fileUrl)
            }
          },
          onExceed (files, fileList) {
            this.$message.error('提示：只能上传一张图片！')
          },
          // 图片上传
          beforeAVatarUpload (file) {
            if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
              this.$message.error('只支持jpg、png、gif格式的图片！')
              return false
            }
          },
          uploadSuccess (response, file, fileList) {
            if(response.code === '200'){
                this.uploadFile.fileName = response.datas.fileName
                this.uploadFile.filePath = response.datas.filePath
                this.uploadFile.fileType = response.datas.fileType
                this.uploadFile.fileSize = response.datas.fileSize
                console.log('上传图片成功')
            } else {
                console.log('上传图片失败')
            }
            
          },
          uploadError (response, file, fileList) {
            this.$message.error('上传图片失败！')
          }
    }

SpringBoot 核心代码:

package com.zzg.controller;
    
    import java.io.FileNotFoundException;
    import java.io.FilterInputStream;
    import java.io.IOException;
    import java.io.InputStream;
    import java.nio.charset.Charset;
    import java.security.InvalidKeyException;
    import java.security.NoSuchAlgorithmException;
    import java.sql.Date;
    import java.text.ParseException;
    import java.text.SimpleDateFormat;
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.Iterator;
    import java.util.Map;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import org.apache.commons.io.IOUtils;
    import org.apache.commons.lang3.ObjectUtils;
    import org.apache.commons.lang3.StringUtils;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.RestController;
    import org.springframework.web.multipart.MultipartFile;
    
    import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
    import com.baomidou.mybatisplus.core.metadata.IPage;
    import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
    import com.zzg.common.AbstractController;
    import com.zzg.common.PageParame;
    import com.zzg.common.Result;
    import com.zzg.entity.UploadFile;
    import com.zzg.minio.entity.MinioUploadEntity;
    import com.zzg.minio.util.MinioUploadUtil;
    import com.zzg.service.UploadFileService;
    
    import io.minio.GetObjectResponse;
    import io.minio.errors.ErrorResponseException;
    import io.minio.errors.InsufficientDataException;
    import io.minio.errors.InternalException;
    import io.minio.errors.InvalidResponseException;
    import io.minio.errors.ServerException;
    import io.minio.errors.XmlParserException;
    import io.swagger.annotations.ApiImplicitParam;
    import io.swagger.annotations.ApiImplicitParams;
    import io.swagger.annotations.ApiOperation;
    import kotlin.Pair;
    import okhttp3.Headers;
    
    /**
     * 文件上传controller
     * 
     * @author zzg
     *
     */
    @RestController
    @RequestMapping("/api/upload/file")
    public class UploadFileController extends AbstractController {
    	@Autowired
    	private UploadFileService uploadFileService;
    
    
    
    	/**
    	 * 上传文件删除
    	 * 
    	 * @param file
    	 */
    	@ApiOperation(httpMethod = "POST", value = "上传文件删除")
    	@RequestMapping(value = "/del", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
    	public Result fileDelete(@RequestBody Map<String, Object> parame) {
    		String filePath = String.valueOf(parame.get("filePath"));
    		MinioUploadEntity entity = new MinioUploadEntity("http://192.168.1.74:9000", "minioadmin", "minioadmin");
    		MinioUploadUtil util = new MinioUploadUtil(entity);
    		util.removeFile(filePath, "gxpt-img");
    		return Result.ok();
    	}
    
    	/**
    	 * 单文件上传
    	 * 
    	 * @param file
    	 */
    	@RequestMapping(value = "/up", method = RequestMethod.POST)
    	public Result fileUpload(@RequestParam("multipartfiles") MultipartFile file) {
    
    		Map<String, Object> rs = new HashMap<String, Object>();
    		// 获取文件名称
    		String fileName = file.getOriginalFilename();
    
    		// 文件大小
    		long fileSize = file.getSize();
    		// 文件类型
    		String fileType = file.getContentType();
    		// 文件标识
    		String filePath = "";
    		// 文件预览地址
    		String fileUrl = "";
    
    		MinioUploadEntity entity = new MinioUploadEntity("http://192.168.1.74:9000", "minioadmin", "minioadmin");
    		MinioUploadUtil util = new MinioUploadUtil(entity);
    
    		// 获取文件后缀类型
    		String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".") + 1);
    
    		InputStream stream;
    		try {
    			stream = file.getInputStream();
    			if (stream != null) {
    				filePath = util.uploadFile(stream, "gxpt-img", "image/jpg", suffix);
    				if (StringUtils.isNotBlank(filePath)) {
    					System.out.println("文件上传成功：" + filePath);
    					if (stream != null) {
    						stream.close();
    					}
    					// 生成文件预览地址
    					try {
    						fileUrl = util.getPreviewAddress(filePath, "gxpt-img");
    					} catch (InvalidKeyException e) {
    						// TODO Auto-generated catch block
    						e.printStackTrace();
    						return Result.error("文件上传失败");
    					} catch (ErrorResponseException e) {
    						// TODO Auto-generated catch block
    						e.printStackTrace();
    						return Result.error("文件上传失败");
    					} catch (InsufficientDataException e) {
    						// TODO Auto-generated catch block
    						e.printStackTrace();
    						return Result.error("文件上传失败");
    					} catch (InternalException e) {
    						// TODO Auto-generated catch block
    						e.printStackTrace();
    						return Result.error("文件上传失败");
    					} catch (InvalidResponseException e) {
    						// TODO Auto-generated catch block
    						e.printStackTrace();
    						return Result.error("文件上传失败");
    					} catch (NoSuchAlgorithmException e) {
    						// TODO Auto-generated catch block
    						e.printStackTrace();
    						return Result.error("文件上传失败");
    					} catch (XmlParserException e) {
    						// TODO Auto-generated catch block
    						e.printStackTrace();
    						return Result.error("文件上传失败");
    					} catch (ServerException e) {
    						// TODO Auto-generated catch block
    						e.printStackTrace();
    						return Result.error("文件上传失败");
    					} catch (IllegalArgumentException e) {
    						// TODO Auto-generated catch block
    						e.printStackTrace();
    						return Result.error("文件上传失败");
    					}
    				} else {
    					System.out.println("文件上传失败：" + filePath);
    				}
    			}
    		} catch (IOException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    			return Result.error("文件上传失败");
    		}
    
    		rs.put("fileName", fileName);
    		rs.put("fileType", fileType);
    		rs.put("filePath", filePath);
    		rs.put("fileSize", fileSize);
    		rs.put("fileUrl", fileUrl);
    		return Result.ok().setData(rs);
    	}
    
    }

Vue 电子文件页面全部前端代码：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210728194220791.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210728194250996.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210728194312168.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2021072819434560.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210728194410557.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n,size_16,color_FFFFFF,t_70