最近在使用 vue2.0开发网页 其中涉及到 选择图片的操作，故整理了如下实例

安装

npm install –save jquery

main.js======引用======import $ from ‘jquery’

<div class="logo">
            <div class="upload-container">
                <div class="imgBox">
                    <input type="file" class="inputstyle" name="file" @change="PreviewImage"  />
                    <img :src="imageUrl" alt="" class="fileImg">
                </div>
            </div>
        </div>

mounted(){
//          初始化token
        this.http.get('/qiniu-token')
            .then(res =>{
                this.qiniutoke=res.data.token;
                console.log('------')
                console.log(res.data.token)
            })
            .catch(function (error) {
                console.log(error);
            });
          this.shuaxin();
        },

methods: {
//            上传头像
            PreviewImage(event){
                this.http.get('/qiniu-token')
                    .then(res =>{
                        this.qiniutoke=res.data.token;
                        console.log('------')
                        console.log(res.data.token)
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                var addr = 'http://opf2ucy0n.bkt.clouddn.com/'
                var file = event.target.files[0];
                var formData = new FormData();
                formData.append('file', file);
                formData.append('token', this.qiniutoke);
                $.ajax({
                    url: 'http://up-z1.qiniu.com/',
                    type: 'POST',
                    dataType: 'json',
                    cache: false,
                    data: formData,
                    processData: false,
                    contentType: false
                }).done((res) => {
                    this.imageUrl= addr+res.key
                }).fail(function(err) {
                    console.log('error');
                });

            },
          }

总结：

token每家公司都不一样

如果从后台调取接口，token必须每次都不一样

addr 变量为图片路径前缀

七牛官方文档