最近在使用 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 = ''
                var file = event.target.files[0];
                var formData = new FormData();
                formData.append('file', file);
                formData.append('token', this.qiniutoke);
                $.ajax({
                    url: '',
                    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 变量为图片路径前缀

---

七牛官方文档