element文件上传

时间：2025-01-19 11:02:04

element文件上传

前言

今天进行了element 文件上传组件的运用，写一下心得

前端组件配置

具体组件配置官方文档里面有，我就不一一说明了

//自定义上传
<el-upload  
    ref="uploadForm" 
    :auto-upload="false" 
    :http-request="upLoad" 
    :on-remove="onRemove" 
    :before-upload="beforeUpload"
    > 
     <el-button slot="trigger" size="small" type="primary">
      点击上传
     </el-button> 
    </template> 
   </el-upload>

这里主要说明两种情况：

第一种直接用action配置上传地址，这种的优点就是方便、省心，element会直接把文件调用后端接口，但是不够灵活，无法传递额外的参数，也只能一个个文件上传。

第二种用http-request覆盖掉默认的上传方式，可以在这里调用后端地址，配置相关请求头，增加参数等等，这里可以设置取消自动上传，然后通过按钮触发组件的上传方法，但是这种方法其实也是一个个发请求的。

而且我的需求是需要在点击提交的时候根据输入的编码传给后端，然后生成文件夹的名字，所有还需要进行一些改造。

//我的上传方法并没有写任何东西，因为我的上传是通过点击提交的时候再自定义上传的
//之所以要写一个空方法是因为需要获取到组件的file数组
//如果不写这个方法  会取action里面的值来进行上传（就算action为空也会）
upLoad(params){
	
},

//fileList是我定义的用于存储file数组的变量
//在上传前，将文件存储到fileList里面
beforeUpload(file){
	(file)
},
//移除方法，将fileList里面的file去掉
onRemove(file){
	let index = (fileItem =>  === );
	(index, 1);
}

//点击提交的时候触发的方法
//第一句话是触发上传组件的上传方法 这样才能触发beforeUpload（因为我们写了取消自动上传）
this.$()
//对fileList用formData拼接
let formData = new FormData();
((item)=>{
    ("file",item);
})
//这里设置下请求头和传递的额外参数
$("bmp/v1/chaincode/uploadEnclosure/"+, formData,{headers: {'Content-Type': 'multipart/form-data'}}).then(data => {
	(data)
}).catch(error => {
    	this.$message({
        message: "error",
        type: 'error'
        })
    })

现在前端基本配置好了，调用接口就可以实现文件上传了

后端接口

controller

	@POST
	@Path("/chaincode/uploadEnclosure/{code}")
	@Consumes(MediaType.MULTIPART_FORM_DATA)
	@ApiOperation("文件上传")
	public List<Map<String, Object>> uploadEnclosure(@Context HttpServletRequest request,@PathParam(value = "code") String code) {
		StandardMultipartHttpServletRequest standardRequest = new StandardMultipartHttpServletRequest(request);
		MultiValueMap<String, MultipartFile> multiFileMap = ();
		List<MultipartFile> fileList = null;
		for (String key : ()) {
			fileList = (key);
		}
		if(null == fileList || ()==0) {
			throw new Exception("文件为空");
		}
		List<Map<String, Object>> result = new ArrayList<Map<String, Object>>();
		String realPath = ().getRealPath("/");
		String baseUrl = realPath+code + ;
		for(MultipartFile file : fileList) {
			Map<String, Object> uploadFile = (file,baseUrl,  ());
			(uploadFile);
		}
	
		return result;	
	}

//另外种方式
 /**
     * 实现多文件上传
     **/
    @RequestMapping(value = "/multifile", method = )
    @ResponseBody
    public ResultUtil multifileUpload(
            @RequestParam("fileName") List<MultipartFile> files) {
        if (()) {
            return ("文件为空");
        }
        for (MultipartFile file : files) {
            String fileName = ();
            int size = (int) ();
            (fileName + "-->" + size);

            if (()) {
                return ("文件为空");
            } else {
                File dest = new File(path + "/" + fileName);
                if (!().exists()) {
                    ().mkdir();
                }
                try {
                    (dest);
                } catch (Exception e) {
                    // TODO Auto-generated catch block
                    ();
                    return ();
                }
            }
        }
        return (null);
    }

service

public Map<String, Object> uploadFile(MultipartFile file,String baseUrl,String fileName) {
		if (()) {
			throw new Exception("文件为空");
        }
        File dest = new File(baseUrl+fileName);
		if (!().exists()) {
			().mkdirs();
        }
        try {
            (dest);
            Map<String,Object> result =new HashMap<String,Object>();
            ("name", fileName);
            String hash = getFileSHA1(dest);
            ("hash", hash);
            return result;
        } catch (IllegalStateException e) {
            ();
            throw new Exception("文件为空");
        } catch (IOException e) {
            ();
            throw new Exception("文件为空");
        } 
	}

sha256获取文件hash

这些方法也是写在service里面的

private static String getFileSHA1(File file) {
        String str = "";
        try {
            str = getHash(file, "SHA-256");
        } catch (Exception e) {
            ();
        }
        return str;
    }
	
	private static String getHash(File file, String hashType) throws Exception {
        InputStream fis = new FileInputStream(file);
        byte buffer[] = new byte[1024];
        MessageDigest md5 = (hashType);
        for (int numRead = 0; (numRead = (buffer)) > 0; ) {
            (buffer, 0, numRead);
        }
        ();
        return toHexString(());
    }
	
	 private static String toHexString(byte b[]) {
        StringBuilder sb = new StringBuilder();
        for (byte aB : b) {
            ((aB & 0xFF));
        }
        return ();
	 }

相关文章