移动端多图上传、文件上传及下载

2018-03-11 本文已影响0人廊桥梦醉

js+css实现手机端的多图片上传，为了方便使用，css和js都未内联，为性能建议使用时改为外联；

如要用到pc端，直接去掉px转换为rem的js代码，修改单位即可；

因multiple在安卓手机中不兼容，所以在安卓上只能一次选中一张图片，在iOS系统上可以实现多图片的上传；

一、预览图

移动端多图上传、文件上传及下载

二、文件上传

通过input 标签的 type=file来实现

然后通过监听change事件获取到上传文件的信息，并通过此信息向后端发送请求，存储信息。

文件上传到云服务器

1、需要引入dingding-oss文件

2.在上传文件的组件中实例化OSS

4.通过client.multipartUpload（生成的命名空间，获取到的图片对象）函数上传到云端（此案例是一次上传一张图片的案例，当上传多张图片的时候，函数的第二个参数为当前的图片信息即fileLIst[i]对象）

通过window.URL.createObjectURL（上传文件信息对象）生成url链接；可以在前端展示

三、vue多图片上传组件

先看效果

html实现：

js实现

css实现

用上边的vue组件上传的图片，发送给服务端的是base64格式的图片，后端经过转码之后存储。