vue axios 七牛云 上传图片 图片预览 后端 node （方法二）

1. 这个方法是在axios里组织表单请求，然后发送给七牛云服务器，应该比较通用的。
2. 上传完图片之后可以直接预览到页面中。

另外，本文还附几个获取表单中文件的方法。

1. 通过$event获取文件信息
2. 通过$refs获取文件信息
3. 通过document.getElementById获取文件信息

直接上代码：
vue代码：

<template>
    <div>
        <div class="rz-picter">
          <img :src="producImg" class="img-avatar">
          <input type="file" name="avatar" id="uppic" accept="image/gif,image/jpeg,image/jpg,image/png" @change="changeImage" ref="avatarInput" class="uppic">
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            uploadToken: '',
            producImg: ''
        }
    },
    methods: {
        changeImage(e,a) {
            console.log(e)
            console.log(a)
            var file = e.target.files[0]
            var file1 = document.getElementById('uppic').files[0];
            var file2 = this.$refs.avatarInput.files[0]
            var file3 = e.path[0].files[0]
            //这四种获取文件的方式得到的结果是一模一样的。都可以直接使用。
            console.log(file  === file1) //true
            console.log(file1 === file2) //true
            console.log(file3 === file2) //true
            // console.log(file)
            let cdnUrl = '你的绑定的域名或者七牛云的测试域名'//记住后面还得加个 /
            // 创建一个 FormData(七牛云要求传输格式为FormData)
                let data = new FormData();
                data.append('token', this.uploadToken);     
                //七牛需要的token，叫后台给，是七牛账号密码等组成的hash
                data.append('file', file);
                //以以下方式组织一个axios请求。
                //至少填4个信息，method，url(这是根据存储区域来的，我是华南的)
                //data(是以FormData形式组织的，添加如上面代码 .append就行)
                //headers(请求头，必须写这个)
                this.axios({
                    method: 'post',
                    url: 'http://upload-z2.qiniup.com',
                    data,
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                })
                .then(res => {
                    this.producImg = cdnUrl + res.data.key
                })
                .catch(err => {
                    console.log(err)
                })
         },
    },
    created() {
    //向后端请求上传凭证，我这里上传凭证是普通凭证。
        this.axios.get('/api/order/uploadToken')
        .then(res => {
            this.uploadToken = res.data.uploadToken
        })
        
    },
}
</script>

<style lang="scss" scoped>
.rz-picter {
    position:absolute;
    .img-avatar {
        width: 100px;
        height: 100px;
    }
    .uppic {
        height: 90px;
        width: 90px;
        margin: 0 auto;
        opacity: 0;
        z-index: 99999;
    }
    .img-avatar {
    position: absolute;
    }
}
</style>

后端代码和之前的比较类似，可以查看之前的一盘文章里面node的请求。主要目的是为了获取上传凭证。