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

1、优点

• 移动端 和 pc 端通用
• 可以自己添加上传进度条
• 解释了一些七牛的知识点

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

2、代码

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

//js
import 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事件。

所以上传图片成功，就把需要value值清空