vue项目中上传图片至七牛云

图片不需要直接上传到自己本地服务，需要先上传到七牛云，获取到访问地址，把图片的访问地址上传到服务器就ok了！

运行demo如下：

<script>
export default {
name: 'index',
data () {
return {
uploadToken:"",
uploadKey:"",
baseUrl:"http://images.xxxx.cn/",
}
},

methods:{
getQiniuToken(){
console.log(localStorage.getItem('token'));
this.user_http_post('/sys/qnuptoken', this.post)
.then(data => {
var data = data.data;
this.uploadToken = data.uploadToken;
this.uploadKey = data.uploadKey;
})
.catch(failure => {
});
},
ajsjd(){
var formData = new FormData();
formData.append("file", document.getElementById("file1").files[0]);
formData.append("key",this.uploadKey);
formData.append("token",this.uploadToken);
var thit = this;
$.ajax({
url: "http://upload.qiniup.com/",
type: "POST",
data: formData,
/**
*必须false才会自动加上正确的Content-Type
*/
contentType: false,
/**
* 必须false才会避开jQuery对 formdata 的默认处理
* XMLHttpRequest会对 formdata 进行正确的处理
*/
processData: false,
success: function (data) {
console.log("上传成功：文件访问地址：",thit.baseUrl+data.key);
},
error: function () {
alert("上传失败！");
$("#imgWait").hide();
}
});

}
},
computed:{
},
mounted () {
this.getQiniuToken();
}
}
</script>

<template>
<div style="width: 300px;height: 300px;">
选择文件:<input type="file" id="file1" @change="ajsjd"/>
</div>

</template>