【uniapp】上传附件+Java后端

一、背景

移动端项目使用uniapp开发,项目有上传附件的需求。现在分享给大家,一起进步

二、前端

关键代码:

复制代码
uni.chooseFile({
	type: "all",
	count: this.count,
	success: res => {
		let len = 0;
		res.tempFiles.forEach((item, index) => {
			len++;
			let info = {
				filename: item.name,
				filepath: item.path,
				filetype: this.fileHz(item.name),
				file: item
			}
			let flag = /\.(doc|docx|xls|xlsx|ppt|pdf|zip|rar|jpg|png|jpeg)$/
				.test(
					item.name.toLowerCase())
			//双重保证
			if (this.size <= info.file.size) {
				this.$toast("文件最大不超过2M");
				return
			}
			if (flag) {
				this.upload(material, info, index1);
			} else {
				this.$toast("请选择.doc、.docx、.xls、.xlsx、.ppt、.pdf、.zip、.rar格式文件")
				return
			}
		})
	},
	fail: err => {
		console.log(err);
	}
});

/* 截取后缀名 */
fileHz(name) {
	//获取最后一个.的位置
	var index = name.lastIndexOf(".");
	//获取后缀
	var ext = name.substr(index + 1);
	return ext
},

发送请求接口:

复制代码
upload(material, info, index) {
	const formData = new FormData();
	if (!info) {
		this.$toast('请上传文件');
		return;
	}
	formData.append('file', info.file);
	let para = {
		//这是额外的参数
	}
	formData.append("para", JSON.stringify(para));
	
	uni.uploadFile({
		url: 'htpp:127.0.0.1:8080/xxx/xxxx/xxxxx', //仅为示例,非真实的接口地址
		filePath: info.file.path,
		name: 'file',
		formData: {
			para: JSON.stringify(para)
		},
		success: (uploadFileRes) => {
			this.$toast("上传成功");
		},
		fail: (err) => {
			this.$toast("提交失败:" + err);
		},
},

三、后端

关键代码:

java 复制代码
public void uploadMaterial(HttpServletRequest request, HttpServletResponse response, JSONObject parado) throws Exception {
    response.setContentType("text/html;charset=UTF-8");
    JSONObject result = new JSONObject();
    try {
        // 处理入参
        JSONObject para = JSONObject.parseJSON(parado.getString("para"));
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        CommonsMultipartFile file = (CommonsMultipartFile) multipartRequest.getFile("file");
        if(file != null){
            InputStream stream = file.getInputStream();
            String filename = file.getOriginalFilename();
            String filetype = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".") + 1);
            byte[] b= IoUtil.getBytes(stream);
            String base64 = Base64Encoder.encode(b);
            para.put("base64",base64);
            para.put("wjmc",filename);
            para.put("type",filetype);
        }
     
    } catch (BusinessException e) {
        logger.error("上传材料失败", e);
      
    } catch (Exception e) {
        logger.error("上传材料失败", e);
    }
	......
}
相关推荐
小朱爱编程1231 分钟前
我用 Jev 做了三个实用工具:整理标签页、分诊飞书反馈、找回 GitHub 收藏
java·开发语言·人工智能·后端·python·架构·ai编程
酷虎软件15 分钟前
视频加标题字幕 API 接口文档
java·数据库·mysql
谢亮_vipxieliang26 分钟前
Java 8/11/17/21/25 怎么选?一篇讲清 LTS 升级路线
java·开发语言
Cindy_cd34 分钟前
IDEA2021 配置 JDK+Maven
java·开发语言·maven
我要神龙摆尾1 小时前
IDEA 阅读插件
java·ide·intellij-idea·idea-plugs·plugs
涉密IT资质笔记2 小时前
涉密人员脱密期管理规范:期限分级模型、就业限制边界与违规认定标准
java·服务器·前端·网络·数据库
mmsx2 小时前
Android Dialog 插槽模式:用一套壳统一全应用的弹窗风格
android·java·dialog·开发语言
huanbailu2 小时前
Qt 跨线程信号槽:connect 返回 true 但槽函数不执行的坑
开发语言·c++·qt·信号槽·跨线程·元类型
u0111026752 小时前
工具页案例图如何编写 alt让图片说明与处理场景对应
java·前端·javascript·图像处理·人工智能·算法·ai作画
ZealSinger2 小时前
Go slog生产落地LevelVar与共存
开发语言·后端·golang·go