APP端

使用uniapp ui的组件，

<uni-file-picker 
	v-model="imageValue" 
	fileMediatype="image" 
	:del-icon = "false"
	mode="grid" 
	@select="select" 
	@delete="del"
	ref="files" 
	:auto-upload="true"/>

使用plus创建上传任务

let url = e.tempFiles[i].url;
var task = plus.uploader.createUpload( network2+"/upup",{ method:"POST"},
(t) => {
	const resp = JSON.parse(t.responseText);
	this.responseUrls.push(resp.url);
	this.fileUrls.push({name:resp.name,url:network+resp.url});
})
task.addFile( url, {key:"file"} );
task.addData("type",this.type);
//开始上传
task.start();

uni-file-picker 组件的一些属性

/**
	 * FilePicker 文件选择上传
	 * @description 文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=4079
	 * @property {Object|Array}	value	组件数据，通常用来回显 ,类型由return-type属性决定
	 * @property {Boolean}	disabled = [true|false]	组件禁用
	 * 	@value true 	禁用
	 * 	@value false 	取消禁用
	 * @property {Boolean}	readonly = [true|false]	组件只读，不可选择，不显示进度，不显示删除按钮
	 * 	@value true 	只读
	 * 	@value false 	取消只读
	 * @property {String}	return-type = [array|object]	限制 value 格式，当为 object 时 ，组件只能单选，且会覆盖
	 * 	@value array	规定 value 属性的类型为数组
	 * 	@value object	规定 value 属性的类型为对象
	 * @property {Boolean}	disable-preview = [true|false]	禁用图片预览，仅 mode:grid 时生效
	 * 	@value true 	禁用图片预览
	 * 	@value false 	取消禁用图片预览
	 * @property {Boolean}	del-icon = [true|false]	是否显示删除按钮
	 * 	@value true 	显示删除按钮
	 * 	@value false 	不显示删除按钮
	 * @property {Boolean}	auto-upload = [true|false]	是否自动上传，值为true则只触发@select,可自行上传
	 * 	@value true 	自动上传
	 * 	@value false 	取消自动上传
	 * @property {Number|String}	limit	最大选择个数 ，h5 会自动忽略多选的部分
	 * @property {String}	title	组件标题，右侧显示上传计数
	 * @property {String}	mode = [list|grid]	选择文件后的文件列表样式
	 * 	@value list 	列表显示
	 * 	@value grid 	宫格显示
	 * @property {String}	file-mediatype = [image|video|all]	选择文件类型
	 * 	@value image	只选择图片
	 * 	@value video	只选择视频
	 * 	@value all		选择所有文件
	 * @property {Array}	file-extname	选择文件后缀，根据 file-mediatype 属性而不同
	 * @property {Object}	list-style	mode:list 时的样式
	 * @property {Object}	image-styles	选择文件后缀，根据 file-mediatype 属性而不同
	 * @event {Function} select 	选择文件后触发
	 * @event {Function} progress 文件上传时触发
	 * @event {Function} success 	上传成功触发
	 * @event {Function} fail 		上传失败触发
	 * @event {Function} delete 	文件从列表移除时触发
	 */

SpringBoot后台接口

//上传后台
    public Map uploadPlus(String type, MultipartFile fileUpload, HttpServletRequest request){
        SimpleDateFormat sFormat = new SimpleDateFormat("yyyyMMddhhmmss" );

        String originalFilename = fileUpload.getOriginalFilename();
        // 文件名字
        String fileName = originalFilename.substring(0,originalFilename.lastIndexOf("." ));
        if(fileName.length()>15){
            // 如果上传文件的名字大于20个字符
            fileName = "";
        }
        // 将时间追加在名字后
        fileName += sFormat.format(Calendar.getInstance().getTime())+ new Random().nextInt(1000);
        // 追加文件格式
        fileName += originalFilename.substring(originalFilename.lastIndexOf("." ));
        String dirName = request.getSession().getServletContext().getRealPath("/" ) ;

        String url = "/data/"+type;
        double originalFilesize = request.getContentLength()/1024;//获取源文件大小
        //服务器存储地址 本地地址
        dirName = "你的附件存储路径";

        File file = new File(dirName+url);
        InputStream inputStream = null ;
        FileOutputStream outputStream = null ;
        if (!file.exists()) {
            Boolean flag = file.mkdirs();
            System.out.println("附件目录不存在,"+(flag?"创建成功!":"创建失败!!!"));
        }
        try {
            inputStream = fileUpload.getInputStream();
            if (!inputStream.equals(null)){
                try {
                    //处理存储过程
                    System.out.println("------------------正在上传-------------------");
                    System.out.println("<=================存储完成==================>");
                    System.out.println("文件地址:"+dirName+url+fileName);
                    System.out.println("文件大小："+originalFilesize);

                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
            outputStream = new FileOutputStream(dirName+url+"/" +fileName);
            byte [] buffer = new byte[10240 * 10240];
            int len = 0;
            while ((len=inputStream.read(buffer)) != -1){
                outputStream.write(buffer, 0, len);
                outputStream.flush();
            }
            outputStream.close();
            inputStream.close();
            System.out.println("<=================上传完成==================>");
        }
        catch (IOException e){
            e.printStackTrace();
        }
        //返回指定连接
        Map<Object,Object> map = new HashMap<>();
        map.put("url",url+"/"+fileName);
        map.put("name",fileName);
        map.put("size",originalFilesize);
        return map;
    }

说明

• 上面的接口直接可以使用，只需要将文件存储地址改为你的地址即可
• h5+plus也可以使用此接口进行上传 例如：

•  plus.gallery.pick(function(obj){}//相册选择
  

•  var cmr = plus.camera.getCamera(1);
   	cmr.captureImage(function(img){}//拍照图片
  

• 有问题的小伙伴留言评论哦！