移动端实现图片压缩上传

上传图片有很多框架，或者是阿里云直传，关于阿里云直传可以看我之前的博客上传图片到阿里云,这次是通过后台进行操作上传图片并压缩；
LUploader适用于移动端，纯原生js写的，不依赖任何类库，压缩后的js文件只有5k，实现图片压缩上传只需三步：
1、在html页面中引入input标签，通过自定义属性data-LUploader绑定点击触发的标签id：

<div class="LUploader" id="demo1">
            <div class="LUploader-container">
              <input data-LUploader='demo1' data-form-file='basestr' name="file"  data-upload-type='front' type="file" accept="image/*" id="img1"/>
              <ul class="LUploader-list"></ul>
            </div>
            <div>
              <div class="icon icon-camera font20"></div>
              <p>单击上传</p>
            </div>
          </div>

2、将样式文件和js文件引入到页面中：

<link rel="stylesheet" href="css/LUploader.css">
<script src="js/LUploader.js"></script>

3、js中初始化插件：

new LUploader(这里放需要绑定的input对象作为参数, {
   url: '',//post请求地址
   multiple: false,//是否一次上传多个文件 默认false
   maxsize: 102400,//忽略压缩操作的文件体积上限 默认100kb
   accept: 'image/jpg,image/jpeg,image/png',//如果写成image/*会出现响应慢的问题
   quality: 0.1,//压缩比 默认0.1 范围0.1-1.0 越小压缩率越大
   showsize:false//是否显示原始文件大小 默认false
});

原始文件有两个问题：
1、图片上传之后没有回显，新增了 dom，在后端返回链接时，对应的img元素设置src属性，只限于单图片上传
2、多次换图片上传报错 Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node，修改了removeChild方法
修改后初始化方法新增了dom：

 new LUploader(el, {
            url:'',
            multiple: false,//是否一次上传多个文件 默认false
            maxsize: 102400,//忽略压缩操作的文件体积上限 默认100kb
            accept: 'image/*',//可上传的图片类型
            quality: 0.1,//压缩比 默认0.1  范围0.1-1.0 越小压缩率越大
            showsize:false,//是否显示原始文件大小 默认false
            dom:'.sp_pic'//新增返显图片dom，要带上标签tag
        });

相关下载文件后面会附上csdn的下载地址:

最后编辑于：2019.10.21 15:54:36