vuejs2.0 上传图片到七牛云项目实战----权威独一份

最近在使用 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 变量为图片路径前缀

---

七牛官方文档