使用有赞Vant上传控件Uploader感悟

1.前记

因为项目是公众号网页项目，公司前端推荐使用有赞Vant组件库，这让之前都是自己撸js，css的我仿佛打开了新世界的大门，废话不多说，上正文。

照着官方文档，我很快上手撸出了界面。

因为需求说明最多只能上传4张图片，故使用了max-count来定义最大上传数量。

2.数据处理

我上传了一张照片，我们来看看fileList的数据是什么格式。

可以看到结果是一个数组array，每张图片都转为一个对象，对象下有两个键值分别是：content->图片base64编码（有赞这个Uploader很贴心的帮我们把图片转成base64格式流），file->一个文件对象，包含了文件名，上传路径，文件类型，文件大小等。

看完了数据，后端需要我们把文件传给他们，这里有一点需要注意，base64编码由于长度原因，请求方式必须用POST。

let photos = []
that.fileList.forEach(v=> {
    let o = {
        base64Str: v.content,
        filename: v.file.name
    }
    photos.push(o)
})

通过axios请求后台

axios.request({
    url: '/x/xxx/api',
    data: {
        photos: photos 
    },
    method: 'POST'
})

3.后台处理

@RequestMapping(value = "/api", method = RequestMethod.POST)
public JSONObject xxx(@RequestBody JSONObject jsonObject) {
	JSONArray photos = jsonObject.getJSONArray("photos");
	if (photos.size() > 0) {
        for (int i = 0; i < photos.size(); i++) {
            JSONObject obj = photos.getJSONObject(i);
            String fileName = obj.getString("filename");
            String base64Str = obj.getString("base64Str");
            String directoryName = "xx/xx";
            String extension = fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
            InputStream inputStream = new ByteArrayInputStream(Base64.decodeBase64(base64Str.substring(base64Str.indexOf(",") + 1)));
            OSSClient client = new OSSClient(endpoint, accessKeyId, accessKeySecret);
            client.putObject(bucketName, getRandomKey(directoryName, extension), inputStream);	// extension指的是拓展名，例如".amr"
        }
    }
}

/**
 * 随机生成一个key
 * @return String 随机key
 */
public static String getRandomKey(String directoryName, String extension){
    StringBuffer key = new StringBuffer();
	if (StringUtils.isNotBlank(directoryName)) {
	    key.append(directoryName);
		if (directoryName.charAt(directoryName.length() - 1) != '/') {
			key.append("/");
		}
	}
	key.append(System.currentTimeMillis());
	for (int i = 0; i < 10; i++) {
		key.append(randomStr.charAt(RandomUtils.nextInt(0, randomStr.length())));
	}
	if (StringUtils.isNotBlank(extension)) {
		if (extension.indexOf(".") == -1) {
			key.append(".");
		}
		key.append(extension);
	}
	return key.toString();
}

后台处理需要注意下base64编码，我先把base64Str解码转为byte[]数组，因为项目使用阿里的OSSClient，上传过程还是比较简单。

4.结语

整个流程做完了，感觉组件大大缩减了开发和调试时间。希望自己越来越强！

记录时间：2019-09-07 14:43