基于vue axios上传图片到七牛云

1、优点

• 移动端 和 pc 端通用

• 可以自己添加上传进度条

• 解释了一些七牛的知识点

缺点：一次不能上传多张图片，不能预览，不能裁剪图片。

2、代码

<!--html--><input @change="uploadInputchange"  id="uploadFileInput" type="file" accept="image/*">

//jsimport axios from 'axios';

methods: {    //触发input change事件
    uploadInputchange(){        let file = document.getElementById("uploadFileInput").files[0];   //选择的图片文件
        this.uploadImgToQiniu(file);
    },    //上传图片到七牛
    uploadImgToQiniu(file){        const axiosInstance = axios.create({withCredentials: false});    //withCredentials 禁止携带cookie，带cookie在七牛上有可能出现跨域问题
        let data = new FormData();
        data.append('token', this.params.token);     //七牛需要的token，叫后台给，是七牛账号密码等组成的hash
        data.append('file', file);
        axiosInstance({            method: 'POST',            url: 'http://upload.qiniup.com/',  //上传地址
            data: data,            timeout:30000,      //超时时间，因为图片上传有可能需要很久
            onUploadProgress: (progressEvent)=> {                //imgLoadPercent 是上传进度，可以用来添加进度条
                let imgLoadPercent = Math.round(progressEvent.loaded * 100 / progressEvent.total);
            },
        }).then(data =>{            document.getElementById("uploadFileInput").value = ''        //上传成功，把input的value设置为空，不然 无法两次选择同一张图片
            //上传成功...  (登录七牛账号，找到七牛给你的 URL地址) 和 data里面的key 拼接成图片下载地址
        }).catch(function(err) {            //上传失败
        });
    }
},

3、遇到的问题

3.1、微信等X5内核浏览器不能选择图片（点击图片选择没有效果），

需要改变input accept 的值，很奇怪

<!--错误--><input @change="uploadInputchange"  id="uploadFileInput" type="file" accept="image/jpeg, image/png, image/gif"><!--正确--><input @change="uploadInputchange"  id="uploadFileInput" type="file" accept="image/*">

3.2、input不能连续两次 选择同一张图片

因为我们是用input的change事件 触发 成功选择图片，change事件触发是需要 input 的value值 改变，但是连续两次选择同一张图片，value值并没有改变，所以就不会触发input的 change事件。

作者：xilong
链接：https://www.jianshu.com/p/6d21a54fbfbd