1、访问前端服务器。
2、修改restynginx的配置信息。
3、创建一个upfile.lua,放到指定位置。
4、创建一个html文件测试即可上传图片到服务器。
功能需求:前端选择本地文件,将选择好的文件显示在界面上进行预览,可同时选择四张进行预览。
思路如下:
前端选择本地的png、jpg、等格式的图片,将图片以二进制的形式传到后端服务器,后端对二进制图片进行处理,返回给前端一个服务器链接在线图片,在浏览器就可以打开链接访问的那种。然后前端将这个图片链接渲染在页面进行预览。
首先
我们看一下uniapp的官方文档:
https://uniapp.dcloud.io/api/media/image?id=chooseimage
大概是这样的
先写一个模拟的demo
1:首先我是是用了colorUI的框架,在项目里面引入
在page底下的vue文件引入
这样一来,就不需要写什么样式了,直接使用写好的就行了。
效果是这样的
每次选完图片之后显示在页面上,我这里设置了最多可以选择四张,图片链接使用了临时的blob,接下来就要使用后端小伙伴给的接口,将自己本地的二进制文件传给他了。
在 chooseImage 选择好图片之后,写一个成功的回调函数,在回到函数里面添加一个图片上传的方法uploadFile,在方法里面添加url,等参数。
若是请求成功
则返回一个图片链接
添加接口之后 的,demo如下:
使用一些已有的组件帮助我们实现这种上传功能。常用的上传组件:Apache 的 Commons FileUploadJavaZoom的UploadBeanjspSmartUpload以下,以FileUpload为例讲解1、在jsp端<form id="form1" name="form1" method="post" action="servlet/fileServlet" enctype="multipart/form-data">要注意enctype="multipart/form-data"然后只需要放置一个file控件,并执行submit操作即可<input name="file" type="file" size="20" ><input type="submit" name="submit" value="提交" >2、web端核心代码如下:public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8") DiskFileItemFactory factory = new DiskFileItemFactory() ServletFileUpload upload = new ServletFileUpload(factory) try { List items = upload.parseRequest(request) Iterator itr = items.iterator() while (itr.hasNext()) {FileItem item = (FileItem) itr.next()if (item.isFormField()) { System.out.println("表单参数名:" + item.getFieldName() + ",表单参数值:" + item.getString("UTF-8"))} else { if (item.getName() != null &&!item.getName().equals("")) { System.out.println("上传文件的大小:" + item.getSize()) System.out.println("上传文件的类型:" + item.getContentType()) System.out.println("上传文件的名称:" + item.getName()) File tempFile = new File(item.getName()) File file = new File(sc.getRealPath("/") + savePath, tempFile.getName()) item.write(file) request.setAttribute("upload.message", "上传文件成功!") }else{ request.setAttribute("upload.message", "没有选择上传文件!") }} } }catch(FileUploadException e){ e.printStackTrace() } catch (Exception e) { e.printStackTrace() request.setAttribute("upload.message", "上传文件失败!") } request.getRequestDispatcher("/uploadResult.jsp").forward(request, response) }欢迎分享,转载请注明来源:夏雨云
评论列表(0条)