文件压缩后上传插件image-compressor

788 阅读1分钟

插件地址:www.npmjs.com/package/@xk… 上传案例:(官方又详细的文档说明,可自行查看,这里给出简单案例)

  • Vue组件中使用方式:

      <input type="file" id="file" accept="image/*">
    
    
    import axios from 'axios';
    import ImageCompressor from '@xkeshi/image-compressor';
    
    var file = document.getElementById('file').files[0];
    new ImageCompressor(file,{
        quality: .6,//压缩率
        success(result) {
            var formData = new FormData();
            formData.append('file',result,result.name);
            formData.append('type','coworker_review');//其它附加参数
            //开始上传
            axios({
                url: 'https://127.0.0.1/review/upload_file',//接口地址
                method: 'post',
                data: formData,
                processData: false,// 告诉axios不要去处理发送的数据(重要参数)
                contentType: false,   // 告诉axios不要去设置Content-Type请求头
            }).then(res=>{
                e.target.value="";//解决无法重复上传同一个文件的问题
                if(res.data&&res.data.code==200){
                    alert('上传成功!');
                    ...
                }else{
                    alert('上传失败!');
                };
            }).catch(err=>{
                alert('上传失败!');
            })
        },
        error(e) {
            alert('上传失败!');
        }
    })