【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);
		},
},

三、后端

关键代码:

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);
    }
	......
}

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp是一种基于Vue.js的跨平台开发框架,可以用于开发iOS、Android和Web应用程序。它提供了丰富的组件和API,使开发者能够轻松地构建功能强大的应用程序。 要在uniapp中实现录音、上传和与Java后端交互的功能,可以按照以下步骤进行操作: 1. 引入uni组件和uView组件:根据引用中提到的uni组件和uView组件,确保已经在uniapp项目中引入了这些组件。 2. 授权录音:使用uniapp提供的API进行录音授权。可以使用uni.request()方法向后端发送请求,获取录音授权。 3. 录制音频:使用uniapp提供的API进行录音操作。可以使用uni.startRecord()方法开始录音,使用uni.stopRecord()方法停止录音。 4. 保存录音文件:将录制的音频文件保存到本地或者上传到服务器。可以使用uni.saveFile()方法将录音文件保存到本地,使用uni.uploadFile()方法将录音文件上传到服务器。 5. 与Java后端交互:使用uniapp提供的API与Java后端进行数据交互。可以使用uni.request()方法发送请求,与后端进行数据传输。 以下是一个示例代码,演示了uniapp中录音、上传和与Java后端交互的过程: ```javascript // 授权录音 uni.authorize({ scope: 'scope.record', success() { // 录制音频 uni.startRecord({ success(res) { // 保存录音文件 uni.saveFile({ tempFilePath: res.tempFilePath, success(saveRes) { // 上传录音文件到服务器 uni.uploadFile({ url: 'http://your-java-backend.com/upload', filePath: saveRes.savedFilePath, name: 'file', success(uploadRes) { console.log('上传成功', uploadRes.data); }, fail(uploadErr) { console.log('上传失败', uploadErr); } }); }, fail(saveErr) { console.log('保存录音文件失败', saveErr); } }); }, fail(res) { console.log('录音失败', res); } }); }, fail() { console.log('录音授权失败'); } }); ``` 请注意,以上代码仅为示例,具体实现可能需要根据实际情况进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值