【uniapp】小程序上传图片-uView

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第26天，点击查看活动详情

业务场景

在小程序中用户可以针对整体用户服务进行反馈与评价，填写文字描述和上传一些证明图片等信息，方便后续运营人员接收到反馈消息时进行整改。这个时候就要求在小程序内可以进行图片的上传，上传图片可以是选择手机相册中的照片，也可以直接调用手机相机进行拍照上传。

集成uVIew

uniapp有一些三方的UI框架，然后UI框架都提供了很多完整的功能，其中就包括上传图片。这里就直接使用的是uView中的组件u-upload来进行图片上传。uView是uni-app生态专用的UI框架，配置简单，上手也比较快。

1、安装uVIewUI

// 安装
npm install uview-ui@1.8.4

2.在main.js文件中引入uView-ui。

import uView from "uview-ui";
Vue.use(uView);

3、在项目根目录uni.scss引入theme.scss

@import 'uview-ui/theme.scss';

4、在App.vue中首行的位置引入

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>

代码实现

action: 服务器上传地址

header: 上传携带的头信息，对象形式

width/height:上传后图片预览的宽度与高度，单位是rpx，这个不可以使用百分比

max-count: 设置最多可以选择的图片的数量

uniapp 代码

<view class="jw-feedback-images">
        <u-upload :action="action" :header="header" :width="147" :height="147" :max-count="4" @on-success="uploadSuccess"
         @on-remove="uploadRemove"></u-upload>
</view>

action: this.$u.http.config.baseUrl + '/image/uploadImage',
header: {
    token: this.$u.http.config.header.token
},

// 上传成功
uploadSuccess(data, index, lists, name) {
        if (data.status == 200) {
                this.uploadSuccessImages[index] = data.data;
                this.formatImage();
        }
},
// 删除已上传的
uploadRemove(index, lists, name) {
        this.uploadSuccessImages.splice(index, 1);
        this.formatImage();
},
// 格式化上传图片的参数
formatImage() {
        this.params.feedbackImg = this.uploadSuccessImages.join(',');
        console.log(this.params.feedbackImg)
}

服务端代码

/**
 * 方法描述: 图片上传 /image/uploadImage
 **/
@ResponseBody
@RequestMapping(value = "/uploadImage")
public Map<String, Object> upload(@RequestParam("file") MultipartFile file, HttpServletRequest request, HttpServletResponse response){

    try{
        //查询数据库配置
        JSONObject params = new JSONObject();
        params.put("configType", "Upload");
        Map<String, Object> configMap = adminConfigService.findConfigByType(params);
        if(!ApiConstant.isSuccess(configMap)){
            return ApiConstant.put(ApiConstant.err500);
        }

        List<AdminConfig> list = (List<AdminConfig>) configMap.get(ApiConstant.dataKey);
        String domain = null;
        String rootPath = null;
        for(AdminConfig adminConfig : list){
            if(adminConfig.getConfigKey().equals("ImageUploadDomain")){
                domain = adminConfig.getConfigValue();
            }
            if(adminConfig.getConfigKey().equals("ImageUploadRootPath")){
                rootPath = adminConfig.getConfigValue();
            }
        }

        //先判断文件是否存在
        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
        String fileAdd = sdf.format(new Date());
        //获取文件夹路径
        File file1 =new File(rootPath+"/"+fileAdd);
        //如果文件夹不存在则创建
        if(!file1 .exists()  && !file1 .isDirectory()){
            file1 .mkdir();
        }

        String fileName = file.getOriginalFilename();
        String fileTyle=fileName.substring(fileName.lastIndexOf("."),fileName.length());
        String fileNam2 = UUID.randomUUID().toString();
        String imagePath = rootPath+"/"+fileAdd+"/"+fileNam2+fileTyle;
        File file2 = new File(imagePath);
        OutputStream os = new FileOutputStream(file2);
        os.write(file.getBytes());
        String resultPath = domain+"/upload/"+fileAdd+"/"+fileNam2+fileTyle;
        os.flush();
        os.close();
        return ApiConstant.putok(resultPath);
    }catch (Exception e){
        LOGGER.error("uploadImage error:{}", MyPubUtil.getError(e));
        return ApiConstant.put(ApiConstant.err500);
    }
}