NutzCN Logo
问答 前台用weui上传照片,java后台怎么接收图片
发布于 1678天前 作者 yanteng0124 2455 次浏览 复制 上一个帖子 下一个帖子
标签:

这是上传的方法,后台要用什么去接收图片呢

weui.uploader('#uploader', {
        url: '/admin/photo/uploadImgOss',
        auto: true,
        type: 'file',
        fileVal: 'fileVal',
        compress: {
            quality: .8
        },
        onBeforeQueued: function(files) {
            // `this` 是轮询到的文件, `files` 是所有文件

            if(["image/jpg", "image/jpeg", "image/png", "image/gif"].indexOf(this.type) < 0){
                weui.alert('请上传图片');
                return false; // 阻止文件添加
            }
            if(this.size > 10 * 1024 * 1024){
                weui.alert('请上传不超过10M的图片');
                return false;
            }
            if (files.length > 5) { // 防止一下子选择过多文件
                weui.alert('最多只能上传5张图片,请重新选择');
                return false;
            }
            if (uploadCount + 1 > 5) {
                weui.alert('最多只能上传5张图片');
                return false;
            }

            ++uploadCount;

            // return true; // 阻止默认行为,不插入预览图的框架
        },
        onQueued: function(){
            //console.log(this);
            // console.log(this.status); // 文件的状态:'ready', 'progress', 'success', 'fail'
            // console.log(this.base64); // 如果是base64上传,file.base64可以获得文件的base64
            // this.upload(); // 如果是手动上传,这里可以通过调用upload来实现;也可以用它来实现重传。
            // this.stop(); // 中断上传
            // return true; // 阻止默认行为,不显示预览图的图像
        },
        onBeforeSend: function(data, headers){
            //console.log(this, data, headers);
            // $.extend(data, { test: 1 }); // 可以扩展此对象来控制上传参数
            // $.extend(headers, { Origin: 'http://127.0.0.1' }); // 可以扩展此对象来控制上传头部
            // return false; // 阻止文件上传
        },
        onProgress: function(percent){
            //console.log(this, percent);
            // return true; // 阻止默认行为,不使用默认的进度显示
        },
        onSuccess: function (ret) {
            console.log(this, ret);
            _pathArray.push(ret.path[0])
            // return true; // 阻止默认行为,不使用默认的成功态
        },
        onError: function(err){
            //console.log(this, err);
            // return true; // 阻止默认行为,不使用默认的失败态
        }
    });
3 回复

这是页面

<div class="weui-cells weui-cells_form" id="uploader">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <div class="weui-uploader">
                    <div class="weui-uploader__hd">
                        <p class="weui-uploader__title">图片上传</p>
                        <!-- <div class="weui-uploader__info"><span id="uploadCount">0</span>/5</div> -->
                    </div>
                    <div class="weui-uploader__bd">
                        <ul class="weui-uploader__files" id="uploaderFiles"></ul>
                        <div class="weui-uploader__input-box">
                            <input id="uploaderInput"  class="weui-uploader__input" type="file" accept="image/*"  multiple="" />
							<!-- capture="camera" -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

把文档过一遍

https://github.com/TomYule/NutzSite/blob/master/src/main/java/io/nutz/nutzsite/module/open/file/UploadController.java

package io.nutz.nutzsite.module.open.file;

import io.nutz.nutzsite.common.base.Result;
import io.nutz.nutzsite.common.utils.UpLoadUtil;
import io.nutz.nutzsite.module.sys.services.ImageService;
import org.nutz.ioc.loader.annotation.Inject;
import org.nutz.ioc.loader.annotation.IocBean;
import org.nutz.lang.util.NutMap;
import org.nutz.log.Log;
import org.nutz.log.Logs;
import org.nutz.mvc.annotation.*;
import org.nutz.mvc.impl.AdaptorErrorContext;
import org.nutz.mvc.upload.TempFile;
import org.nutz.mvc.upload.UploadAdaptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;

/**
 * @Author: Haimming
 * @Date: 2019-05-08 13:42
 * @Version 1.0
 */
@IocBean
@At("/open/file")
public class UploadController {
    private static final Log log = Logs.get();
    @Inject
    private ImageService imageService;

    @At("/get/?")
    @Ok("raw")
    public void get(String id,HttpServletRequest req, HttpServletResponse resp) {
        String path = imageService.get(id);
        File file = new File(path);
        // 取得文件名。
        String filename = file.getName();
        // 取得文件的后缀名。
        String ext = filename.substring(filename.lastIndexOf(".") + 1).toUpperCase();
        // 以流的形式下载文件。
        try (InputStream fis  = new BufferedInputStream(new FileInputStream(path))){
            byte[] buffer = new byte[fis.available()];
            fis.read(buffer);
            fis.close();
            // 清空response
            resp.reset();
            // 设置response的Header
            resp.addHeader("Content-Disposition", "attachment;filename=" + new String(filename.getBytes()));
            resp.addHeader("Content-Length", "" + file.length());
            OutputStream toClient = new BufferedOutputStream(resp.getOutputStream());
            resp.setContentType("application/octet-stream");
            toClient.write(buffer);
            toClient.flush();
            toClient.close();
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    @At
    @Ok("json")
    @POST
    @AdaptBy(type = UploadAdaptor.class)
    public Object upload(@Param("Filedata") TempFile tf, HttpServletRequest req, AdaptorErrorContext err) {
        try {
            if (err != null && err.getAdaptorErr() != null) {
                return NutMap.NEW().addv("code", 1).addv("msg", "文件不合法");
            } else if (tf == null) {
                return Result.error("空文件");
            } else {
                String url = UpLoadUtil.upLoadFileSysConfigPath(tf,"tmp");
                String u = req.getServletContext().getContextPath();
                return Result.success("上传成功",  u + url );
            }
        } catch (Exception e) {
            e.printStackTrace();
            return Result.error("系统错误");
        } catch (Throwable e) {
            return Result.error("图片格式错误");
        }
    }
}

文件上传需要加注解

可以用POSTMAN 先测试测试 看你写的方法

  @AdaptBy(type = UploadAdaptor.class)
添加回复
请先登陆
回到顶部