微信小程序多张单张图片上传

微信小程序图片上传代码如下,springboot后台,files为参数名,count 为最多上传图片个数:

Page({

data: {

hasMore: false,

clientHeight: 0,

// 图片布局列表(二维数组,由`albumList`计算而得)

layoutList: [],

// 布局列数

layoutColumnSize: 3,

// 是否显示loading

showLoading: false,

// loading提示语

loadingMessage: '',

// 是否显示toast

showToast: false,

// 提示消息

toastMessage: '',

// 是否显示动作命令

showActionsSheet: false,

// 当前操作的图片

imageInAction: '',

// 图片预览模式

previewMode: false,

// 当前预览索引

previewIndex: 0,

images_upload: '../resources/images/camera.png',

},

/* 函数描述:作为上传文件时递归上传的函数体体;

* 参数描述:

* filePaths是文件路径数组

* successUp是成功上传的个数

* failUp是上传失败的个数

* i是文件路径数组的指标

* length是文件路径数组的长度

*/

uploadDIY(filePaths, successUp, failUp, i, length) {

console.log(filePaths)

wx.uploadFile({

url: 'http://192.168.1.103/zjkj/product/uploadFile',

filePath: filePaths[i],

name: 'files',

success: (resp) => {

successUp++;

},

fail: (res) => {

failUp++;

},

complete: () => {

i++;

if (i == length) {

console.log('总共' + successUp + '张上传成功,' + failUp + '张上传失败!');

}

else { //递归调用uploadDIY函数

this.uploadDIY(filePaths, successUp, failUp, i, length);

}

},

});

},

uploadImage: function (e) {

wx.chooseImage({

count: 9,

sizeType: ['original', 'compressed'],

sourceType: ['album', 'camera'],

success: (res) => {

 

var successUp = 0; //成功个数

var failUp = 0; //失败个数

var length = res.tempFilePaths.length; //总共个数

var i = 0; //第几个

console.log(res.tempFilePaths);

this.uploadDIY(res.tempFilePaths, successUp, failUp, i, length);

},

});

}

})

 

 

springboot后台接收:

/**
     * 图片上传
     * @throws Exception 
     */
    @PostMapping("/uploadFile")
    @ResponseBody
    public AjaxResult uploadFile(@RequestParam( value="files",required=false)MultipartFile  file) {
        
        String path;
        try {
            path = FileUploadUtils.upload(Global.getProdImgsPath(),file);
        } catch (IOException e) {
            e.printStackTrace();
            return error("上传失败,请联系管理员!");
        }
        return success(serverConfig.getUrl() +path);
    }

 

/**
     * 根据文件路径上传
     *
     * @param baseDir 相对应用的基目录
     * @param file 上传的文件
     * @return 文件名称
     * @throws IOException
     */
    public static final String upload(String baseDir, MultipartFile file) throws IOException
    {
        try
        {
            return upload(baseDir, file, MimeTypeUtils.DEFAULT_ALLOWED_EXTENSION);
        }
        catch (Exception e)
        {
            throw new IOException(e.getMessage(), e);
        }
    }

 

/**
     * 文件上传
     *
     * @param baseDir 相对应用的基目录
     * @param file 上传的文件
     * @param extension 上传文件类型
     * @return 返回上传成功的文件名
     * @throws FileSizeLimitExceededException 如果超出最大大小
     * @throws FileNameLengthLimitExceededException 文件名太长
     * @throws IOException 比如读写文件出错时
     * @throws InvalidExtensionException 文件校验异常
     */
    public static final String upload(String baseDir, MultipartFile file, String[] allowedExtension)
            throws FileSizeLimitExceededException, IOException, FileNameLengthLimitExceededException,
            InvalidExtensionException
    {
        int fileNamelength = file.getOriginalFilename().length();
        if (fileNamelength > FileUploadUtils.DEFAULT_FILE_NAME_LENGTH)
        {
            throw new FileNameLengthLimitExceededException(FileUploadUtils.DEFAULT_FILE_NAME_LENGTH);
        }

        assertAllowed(file, allowedExtension);

        String fileName = extractFilename(file);

        File desc = getAbsoluteFile(baseDir, fileName);
        file.transferTo(desc);
        String pathFileName = getPathFileName(baseDir, fileName);
        return pathFileName;
    }

 

你可能感兴趣的:(springboot,微信小程序,图片上传)