插件地址: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('上传失败!'); } })