vue用input调取用户相机相册lrz压缩实现上传

码出未来jgs

于 2020-07-29 16:17:19 发布

阅读量321

点赞数

分类专栏：移动端拍照相册

本文链接：https://blog.csdn.net/jgs525/article/details/107667990

版权

本文详细介绍了在Vue项目中如何通过input元素调用用户手机相机或相册，结合lrz库进行图片压缩，并实现图片的上传操作。包括事件触发、文件选择、图片预览、压缩以及上传接口调用等关键步骤。

摘要由CSDN通过智能技术生成

    <mt-popup
    v-model="popupVisible"
    position="bottom">
    <ul>
        <li>拍照
            <input
            id="cameraInput"
            type="file"
            accept="image/*"
            capture="camera"
            @change="onFileChange($event)"
            >
        </li>
        <li>从相册中选择
            <input
            id="photoInput"
            type="file"
            accept="image/*"
            multiple="multiple"
            @change="multipleChange($event)"
            >
        </li>
        <li @click="popupVisible=false">取消</li>
    </ul>
    </mt-popup>
    onFileChange(e) {
        this.popupVisible=false
        // this.openImgs()
        var files = e.target.files || e.dataTransfer.files
        if