删减版请点击这里
1、前端是 手机端app 用mui组件上传图片
//点击上传按钮触发此事件,随便写个button按钮就行
getSheet:function(){
plus.nativeUI.actionSheet({
title:"请选择",
cancel:"取消",
buttons:[{title:"拍照"},{title:"相册选取"}]
}, function(e){
var index = e.index;
switch (index){
case 0:
text += "取消";
break;
case 1:
//调用手机拍照的方法
app.getImage();
break;
case 2:
//调用选择手机相册的方法
app.getGalleryImage();
break;
}
});
},
//调用手机拍照的方法
getImage: function() {
var cmr = plus.camera.getCamera();
cmr.captureImage(function(p) {
plus.io.resolveLocalFileSystemURL(p, function(entry) {
var gentry={fileName: entry.name,filePath:p,path:entry.toLocalURL()};
app.uploadFile(gentry);
}, function(e) {
});
}, function(e) {
}, {
filename: "_doc/camera/",
index: 1
});
},
//调用选择手机相册的方法
getGalleryImage: function() {
plus.gallery.pick(function(p){
var name = p.substr(p.lastIndexOf('/')+1);
var gentry={fileName: name,filePath:p,path:p};
app.uploadFile(gentry);
}, function(e){
mui.toast('取消选择图片');
}, {filter:'image'});
},
//选中图片之后点击确认,直接把图片上传到服务端
uploadFile:function(gentry){
// 上传服务器
plus.nativeUI.showWaiting();
var task = plus.uploader.createUpload(serverUrl+"/gysupload/gysUploadFile",{ method:"POST" },function (t, status) {
plus.nativeUI.closeWaiting();
// 上传完成
if ( status == 200 ) {
var resText = JSON.parse(t.responseText);
if(resText.code==200 || resText.code=='200'){
app.filelists.push(resText.data);
mui.toast("上传成功");
}else{
mui.toast(resText.msg);
}
} else {
mui.alert("上传失败:" + status, '失败', '关闭', null, 'div');
}
});
task.setRequestHeader('Authorization', "Bearer "+localStorage.getItem('token'));
task.addFile(gentry.filePath,{key:gentry.fileName});
// task.addData("recid",app.school.recid);
task.addData("module",`xxda_jsgs,${app.school.recid}`);
task.start();
},
//加载图片列表
getFileList:function(){
ajaxutil(serverUrl+"/gysupload/getGysuploadList",{
data: {
jsondata: JSON.stringify({fileModule:'xxda_jsgs',spjyzId:app.school.recid})
},
type: 'post',//HTTP请求类型
dataType: 'json',
timeout:50000,//超时时间设置为20秒;
success: function(data) {
console.log(data);
if(data.code==200){//获取列表成功成功
if(data.data!=null && data.data!=''){
app.filelists=data.data;
}
}else{
mui.toast('获取附件失败:'+data.msg);
}
},
error: function(xhr, type, errorThrown) {
//异常处理;
mui.toast('获取附件失败!');
}
});
},
//因为展示的是图片列表,此处给加了个点击列表中展示的名字,加载图片的功能,其实就是个下载图片,给用户展示
displayFile: function(gentry) {
plus.nativeUI.showWaiting();
var task = plus.downloader.createDownload(serverUrl + "/gysupload/gysDownloadFile?recid="+gentry.recid+"",{method: 'POST',filename:"_doc/file/"}, function(d,status){
plus.nativeUI.closeWaiting();
if (status == 200){
plus.runtime.openFile(d.filename, {}, function(e){
mui.alert( "无法打开此文件:"+e.emssage,"警告" );
});
} else {
mui.alert("下载文件失败: " + status, "警告");
}
});
task.setRequestHeader('Authorization', "Bearer "+localStorage.getItem('token'));
task.start();
},
//删除图片
deleteFile:function(index){
ajaxutil(serverUrl+"/gysupload/gysRemoveFile",{
data: {
recid: app.filelists[index].recid
},
type: 'post',//HTTP请求类型
dataType: 'json',
success: function(data) {
if(data.code==200){//成功
app.filelists.splice(index,1);
}else{
mui.toast('删除附件失败:'+data.msg);
}
},
error: function(xhr, type, errorThrown) {
//异常处理;
mui.toast('删除附件异常!');
}
});
},
2、java服务端把上传的图片用base64保存以及点击的时候怎么把base64字符串通过浏览器下载
package com.ruoyi.mobile.controller;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.ruoyi.common.utils.IdUtils;
import com.ruoyi.common.utils.SecurityUtils;
import com.ruoyi.common.utils.StringUtils;
import com.ruoyi.framework.web.controller.BaseController;
import com.ruoyi.framework.web.domain.AjaxResult;
import com.ruoyi.mobile.utils.Const;
import com.ruoyi.mobile.utils.JsonUtils;
import com.ruoyi.spzs.domain.SpzsGysUpload;
import com.ruoyi.spzs.service.ISpzsGysUploadService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.MultipartResolver;
import sun.misc.BASE64Decoder;
import sun.misc.BASE64Encoder;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.net.URLEncoder;
import java.time.Instant;
import java.util.Date;
import java.util.Iterator;
import java.util.List;
import java.util.UUID;
/**
* 手机端上传附件,上传至spzs_gys_upload表,存为base64,外键为spjyz_id
*/
@Api("附件信息spzs_gys_upload")
@Controller
@RequestMapping("/mobile/gysupload")
public class GysUploadController extends BaseController {
@Autowired
private MultipartResolver multipartResolver;
@Autowired
private ISpzsGysUploadService iSpzsGysUploadService;
@ApiOperation("附件列表(不分页)")
@RequestMapping(value = "/getGysuploadList", method = { RequestMethod.POST }, produces = "application/json;charset=UTF-8")
public @ResponseBody
AjaxResult getAttachmentList(HttpServletRequest request, HttpServletResponse response){
try{
String jsondata=request.getParameter("jsondata");
if (StringUtils.isEmpty(jsondata))
{
return AjaxResult.error(Const.MOBILE_PARAMETER_NULL_DESCRIPTION);
}
SpzsGysUpload spzsGysUpload = JsonUtils.json2pojo(jsondata,SpzsGysUpload.class);
LambdaQueryWrapper<SpzsGysUpload> lqw = new LambdaQueryWrapper<SpzsGysUpload>();
if (StringUtils.isEmpty(spzsGysUpload.getSpjyzId()))
{
return AjaxResult.error(Const.MOBILE_PARAMETER_NULL_DESCRIPTION);
}
if (StringUtils.isEmpty(spzsGysUpload.getFileModule()))
{
return AjaxResult.error(Const.MOBILE_PARAMETER_NULL_DESCRIPTION);
}
lqw.eq(SpzsGysUpload::getSpjyzId,spzsGysUpload.getSpjyzId());
lqw.eq(SpzsGysUpload::getFileModule,spzsGysUpload.getFileModule());
List<SpzsGysUpload> list = iSpzsGysUploadService.list(lqw);
return AjaxResult.success(list);
}catch(Exception e){
e.printStackTrace();
return AjaxResult.error(Const.MOBILE_ERROR_DESCRIPTION+":"+e.getMessage());
}
}
@ApiOperation("上传附件")
@RequestMapping(value = "/gysUploadFile", method = { RequestMethod.POST }, produces = "application/json;charset=UTF-8")
public @ResponseBody AjaxResult uploadFile(HttpServletRequest request, HttpServletResponse response)
{
try {
//这原本是2个参数,但是另一个参数死活传不进来,所以就合并成一个参数,用“,”隔开
String fileModule=request.getParameter("module");
String[] split = fileModule.split(",");
SpzsGysUpload spzsGysUpload = new SpzsGysUpload();
boolean istrue = false;
// 判断 request 是否有文件上传,即多部分请求
if (multipartResolver.isMultipart(request)) {
// 转换成多部分request
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) multipartResolver.resolveMultipart(request);
// 取得request中的所有文件名
Iterator<String> iter = multiRequest.getFileNames();
while (iter.hasNext()) {
// 记录上传过程起始时的时间,用来计算上传时间
int pre = (int) System.currentTimeMillis();
// 取得上传文件
MultipartFile file = multiRequest.getFile(iter.next());
if (file != null) {
// 取得当前上传文件的文件名称
Instant instantnow = Instant.now();
spzsGysUpload.setRecid(IdUtils.fastSimpleUUID());
byte[] b = file.getBytes();
//定义一个BASE64Encoder
BASE64Encoder encode = new BASE64Encoder();
//将byte[]转换为base64
String base64 = encode.encode(b);
if(base64.indexOf("data:image")!=0){
//此处添加这个image头之后,可以直接返回给前端,前端直接把这个内容放在img标签src属性内就好,直接就能展示 <img :src="内容"/>
base64 = "data:image/jpeg;base64," + base64;
}
spzsGysUpload.setFileContent(base64);
spzsGysUpload.setFileSize(String.valueOf(b.length));
String fileName = UUID.randomUUID().toString().replaceAll("-", "") + ".jpg";
String newFileName = System.currentTimeMillis()+"."+fileName.split("\\.")[fileName.split("\\.").length - 1];
spzsGysUpload.setFileName(newFileName);
spzsGysUpload.setFileType("jpg");
spzsGysUpload.setFileTime(Date.from(instantnow));
spzsGysUpload.setFileModule(split[0]);
spzsGysUpload.setSpjyzId(split[1]);
spzsGysUpload.setRemark(file.getOriginalFilename());
spzsGysUpload.setCreater(SecurityUtils.getUsername());
spzsGysUpload.setCreateTime(Date.from(instantnow));
spzsGysUpload.setUpdater(SecurityUtils.getUsername());
spzsGysUpload.setUpdateTime(Date.from(instantnow));
istrue = iSpzsGysUploadService.save(spzsGysUpload);
}
}
}
if(istrue){
return AjaxResult.success(spzsGysUpload);
}else{
return AjaxResult.error("上传失败!");
}
} catch (Exception e) {
e.printStackTrace();
logger.error("上传失败:", e);
return AjaxResult.error(Const.UPLOAD_FILE_NULL_DESCRIPTION+":"+e.getMessage());
}
}
@ApiOperation("下载附件")
@RequestMapping(value = "/gysDownloadFile", method = { RequestMethod.POST }, produces = "application/json;charset=UTF-8")
public void downloadFile(HttpServletRequest request, HttpServletResponse response) throws Exception
{
String recid = request.getParameter("recid");
if (StringUtils.isEmpty(recid))
{
return;
}
SpzsGysUpload spzsGysUpload = iSpzsGysUploadService.getById(recid);
if(spzsGysUpload==null || StringUtils.isEmpty(spzsGysUpload.getFileContent())){
return;
}
String fileContent=spzsGysUpload.getFileContent().replace("data:image/jpeg;base64,","");
//设置响应头和客户端保存文件名
response.setContentType("text/html;charset=UTF-8");
response.setHeader("Content-Disposition", "inline;filename=" + URLEncoder.encode(spzsGysUpload.getRemark(),"UTF-8"));
//用于记录以完成的下载的数据量,单位是byte
BASE64Decoder decoder = new BASE64Decoder();
//Base64解码
byte[] bytes = decoder.decodeBuffer(fileContent);
ByteArrayInputStream is=new ByteArrayInputStream(bytes);
OutputStream os = null;
try {
os = response.getOutputStream();
byte[] flush=new byte[5];
int len=-1;
while((len=is.read(flush))!=-1){//这里是写入程序
os.write(flush,0,len);//这一步是将程序写入到文件 这里一定要记住文件流一定要释放
}
os.flush();
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e){
e.printStackTrace();
} finally {
try {
if(os!=null) {
os.close();
}
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
@ApiOperation("删除附件")
@RequestMapping(value = "/gysRemoveFile", method = { RequestMethod.POST }, produces = "application/json;charset=UTF-8")
public @ResponseBody AjaxResult removeFile(HttpServletRequest request, HttpServletResponse response){
try{
String recid = request.getParameter("recid");
if (StringUtils.isEmpty(recid))
{
return AjaxResult.error(Const.MOBILE_PARAMETER_NULL_DESCRIPTION);
}
boolean istrue = iSpzsGysUploadService.removeById(recid);
if(istrue){
return AjaxResult.success();
}else{
return AjaxResult.error("删除失败");
}
}catch(Exception e){
e.printStackTrace();
return AjaxResult.error(Const.MOBILE_ERROR_DESCRIPTION+":"+e.getMessage());
}
}
}
3、总结
其实这就是我写项目的时候遇到的,给自己以后写项目做个参考,要是有不同的意见的欢迎指正