七牛云上传图片变链接

任意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>