关于JS<input>上传图片时遇到的问题

• 上传图片

<input type="file" ref="file_upload" id="file_upload" accept="image/*" @change="imgChange">

• 图片改变事件

imgChange(data) {
     this.dealImage(data.target.files[0],{width:400,height:300},(base64)=>{
        //base64：图片的base64格式
     })
},
            

• 压缩图片

/**
 * 图片压缩，默认同比例压缩
 * @param {Object} data
 *         data 为file的base64
 *         原为path，但是浏览器安全限制，获取不到(pc端传入的路径可以为相对路径，但是在移动端上必须传入的路径是照相图片储存的绝对路径)
 * @param {Object} obj
 *         obj 对象 有 width， height， quality(0-1)
 * @param {Object} callback
 *         回调函数有一个参数，base64的字符串数据
 */
dealImage: function (data, obj, callback) {
    const reader = new FileReader();
    reader.readAsDataURL(data);//发起异步读取文件请求，读取结果为data:url的字符串形式
    reader.onload = (ev) => {
        let img = new Image();
        img.src = ev.target.result;
        img.onload = function () {
            let that = this;
            // 默认按比例压缩
            let w = that.width,
                h = that.height,
                scale = w / h;
            w = obj.width || w;
            h = obj.height || (w / scale);
            let quality = 0.8;        // 默认图片质量为0.7

            //生成canvas
            let canvas = document.createElement('canvas');
            let ctx = canvas.getContext('2d');

            // 创建属性节点
            let anw = document.createAttribute("width");
            anw.nodeValue = w;
            let anh = document.createAttribute("height");
            anh.nodeValue = h;
            canvas.setAttributeNode(anw);
            canvas.setAttributeNode(anh);

            ctx.drawImage(that, 0, 0, w, h);
            // 图像质量
            if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
                quality = obj.quality;
            }
            // quality值越小，所绘制出的图像越模糊
            let base64 = canvas.toDataURL('image/jpeg', quality);
            // 回调函数返回base64的值
            typeof callback === 'function' && callback(base64);
        }
    }
},

• 上传文图片时选择相同文件或者第二次上传图片无法触发change事件的问题

  • 原因：当选择完一个文件之后，会将文件名存放在input中的value值中，当下一次change之后，比对发现，value值没有发生变化，所以不能触发change。so需要下次触发点击事件将value值清空

        this.$refs.file_upload = '';