vant的Uploader 文件上传,图片数据回显问题

 更新时间:2022年10月20日 11:20:39   作者:飞鱼爱吃米  
这篇文章主要介绍了vant的Uploader 文件上传,图片数据回显问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vant的Uploader文件上传,图片数据回显

需求


描述一下:点击上传证件照,选取需要的图片文件,然后图片在证件照栏展示

分析

看着挺简单的,用的是vant,里面有个文件上传的组件Uploader,它里面的文件预览模式是这样的

啊这。。。

指定不行,还好它还有自定义上传样式的,像这样


问题又来了:选取文件后没反应了!!!

其实也不是,没有反应就是没有对文件数据进行处理展示。

看一下Uploader的API:

参数file可以获取到一个文件对象

可以拿到文件名、文件类型、还有图片的base64格式的图片数据,那么我们只需要定义一个字段来接受这个图片数据,并绑定给展示证件照的图片框上就能实现图片回显了!

使用

结构部分

      <van-field name="photo" label="证件照" colon class="tx">
        <template #input>
          <van-image :src="staffPhoto ?staffPhoto : require('@/assets/icon/tx.png')" />
        </template>
      </van-field>
      <van-uploader :before-read="beforeRead" :after-read="afterRead">
        <van-button icon="add-o">上传证件照</van-button>
      </van-uploader>

方法部分

    const afterRead = (file) => {
      state.staffPhoto = file.content;
    };

Uploader里面呢还有一个API:before-read

我们一般在这个里面对图片的格式进行控制

举个栗子:

    // 返回布尔值
    const beforeRead = (file) => {
      if (file.type !== "image/jpeg") {
        Toast("请上传 jpg 格式图片");
        return false;
      }
      return true;
    };

当然,我们也可以对图片的大小进行控制

自带的事件oversize

	const onOversize = () => {
      Toast("文件大小不能超过 500kb");
    };

结构部分就是:

<van-uploader multiple :max-size="onOverSize" />

基本使用Uploader用到的功能就这些了,如果有其他的需求可以访问文档:

Uploader的基本使用

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

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

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

<van-uploader v-model="fileList" multiple :max-count="4"/>

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

数据处理

我上传了一张照片,我们来看看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'
})

后台处理

@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,上传过程还是比较简单。

整个流程做完了,感觉组件大大缩减了开发和调试时间。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue前端HbuliderEslint实时校验自动修复设置

    vue前端HbuliderEslint实时校验自动修复设置

    这篇文章主要为大家介绍了vue前端中Hbulider中Eslint实时校验自动修复设置操作过程,有需要的朋友可以借鉴参考下希望能够有所帮助
    2021-10-10
  • 详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)

    详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)

    这篇文章主要介绍了详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • vue项目实现图片上传功能

    vue项目实现图片上传功能

    这篇文章主要为大家详细介绍了vue项目实现图片上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • 学习vue.js条件渲染

    学习vue.js条件渲染

    这篇文章主要和大家一起学习vue.js条件渲染,代码注释详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • Vue实现模糊查询-Mysql数据库数据

    Vue实现模糊查询-Mysql数据库数据

    这篇文章主要介绍了基于Vue实现Mysql数据库数据模糊查询,下面文章我们主要实现的是输入框中输入数据,根据输入的结果模糊搜索数据库对应内容,实现模糊查询,感兴趣的小伙伴可以进入文章我们一起学习
    2021-12-12
  • 源码浅析Vue3中的组件挂载

    源码浅析Vue3中的组件挂载

    这篇文章主要带大家从源码分析一下Vue3中的组件挂载的相关知识,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以跟随小编一起了解一下
    2023-09-09
  • 关于element中表格和表单的封装方式

    关于element中表格和表单的封装方式

    这篇文章主要介绍了关于element中表格和表单的封装方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue中PC端使用高德地图实现搜索定位、地址标记、弹窗显示定位详情(完整实例)

    vue中PC端使用高德地图实现搜索定位、地址标记、弹窗显示定位详情(完整实例)

    这篇文章主要介绍了vue中PC端使用高德地图实现搜索定位、地址标记、弹窗显示定位详情,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • vue+elementUI多表单同时提交及表单校验最新解决方案

    vue+elementUI多表单同时提交及表单校验最新解决方案

    假设有一个页面,需要分三步填写三个表单,且每个表单位于独立的组件中,然后最后保存同时提交,如何进行表单必填项校验,下面小编给大家介绍vue+elementUI多表单同时提交及表单校验最新解决方案,感兴趣的朋友一起看看吧
    2024-03-03
  • Vue项目打包成Docker镜像包的简单步骤

    Vue项目打包成Docker镜像包的简单步骤

    最近做时速云项目部署,需要将前端项目打成镜像文件,下面这篇文章主要给大家介绍了关于Vue项目打包成Docker镜像包的简单步骤,需要的朋友可以参考下
    2023-10-10

最新评论