任意vue文件

向后端传图片的时候用七牛云

<template>
<div class="account_book">
<input id="uploadFileInput" @change="getimg($event)" accept="image/*" type="file" />
</div>
</template>
<script>
export default {
name: "AccountBook",
data(){ // 传多张图片时不能覆盖本数组内的对象的任意一个值，不然会清空这个对象内的其他值
return {
backstage: '',
upurl: '',
token: '',
file: ''
}
},
mounted(){
this.gettoken();
},
methods: {
getimg(event){
//获取文件对象
this.img[0].file = event.target.files[0];
//withCredentials 禁止携带cookie，带cookie在七牛上有可能出现跨域问题
//this.$http等价于axios，是我自己封装的vue原型
const axiosInstance = this.$http.create({withCredentials: false});
let data = new FormData();
//七牛需要的token，叫后台给，是七牛账号密码等组成的hash
data.append('token', this.token);
data.append('file', this.file);
axiosInstance({
method: 'POST',
url: this.upurl,
//上传地址
data: data,
timeout:30000,
//超时时间，因为图片上传有可能需要很久
onUploadProgress: (progressEvent)=> {
//imgLoadPercent 是上传进度，可以用来添加进度条
let imgLoadPercent = Math.round(progressEvent.loaded * 100 / progressEvent.total);
},
}).then(res=>{
//上传成功，把input的value设置为空，不然 无法两次选择同一张图片
document.getElementById("uploadFileInput").value = '';
//上传成功...
(登录七牛账号，找到七牛给你的 URL地址) 和 data里面的key 拼接成图片下载地址
console.log(res.data);
this.backstage = this.backstage + '/' + res.data.key;
console.log(this.backstage)
}).catch(function(err) {
console.log('上传失败！')
});
},
gettoken(){
this.$http({
url: 'Datastorage/uploadTokenGzh',
headers: {
token: localStorage.getItem('token') || this.$http.token
}
}).then(res=>{
if(res.data.code === 10000) {
this.upurl = res.data.data.upload_url;
this.token = res.data.data.token;
this.backstage = res.data.data.http_url;
console.log(res.data.data);
console.log('成功了，兄弟！');
}
}).catch(err=>{
console.log(err)
})
}
}
</script>

最后

以上就是无心大炮为你收集整理的七牛云上传图片变链接任意vue文件的全部内容，希望文章能够帮你解决七牛云上传图片变链接任意vue文件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。