上传图片到七牛云

上传图片单张图片到七牛云

用的是vant-ui 的

<van-uploader :accept='"image/*"' result-type="file" :after-read="afterRead">
  上传图片
</van-uploader>
<!-- result-type="file" afterRead获取的file中只有File内容， 具体配置可查看vant-ui的文档 -->

上传图片到七牛云

1. 使用的是axios
2. 七牛需要的token，后台获取
3. 七牛的上传地址 可以查看七牛存储区域

afterRead(file){
  console.log(file);
  this.uploadImgToQiniu(token,file);  // token 后台获取
},

//上传图片到七牛， 使用的是axios
uploadImgToQiniu(token,file){
  let that = this;
    const axiosInstance = axios.create({withCredentials: false});    //withCredentials 禁止携带cookie，带cookie在七牛上有可能出现跨域问题
    let data = new FormData();
    data.append('token', token);     //七牛需要的token，后台获取
    data.append('file', file["file"]); // 图片文件

    //  key 是上传到七牛的名字  例：原图是1.jpg,file.file.name的值为1.jpg
   
    data.append('key', new Date().getTime()  + "_" + file.file.name);
    axiosInstance({
        method: 'POST',
        url: 'https://upload.qiniup.com/',  //上传地址
        data: data,
        timeout:30000,      //超时时间，因为图片上传时间有可能比较长
        // onUploadProgress: (progressEvent)=> {
        //     //imgLoadPercent 是上传进度，可以用来添加进度条
        //     let imgLoadPercent = Math.round(progressEvent.loaded * 100 / progressEvent.total);
        // },
    }).then(res =>{
      if(res.status == 200){
        // 上传成功， 返回的res中会带上文件的名字 例：1.jpg  传入的key是什么返回的就是什么 
      }else{
        //上传失败
      }
  
    }).catch(function(err) {
        //上传失败
    });
},

用原生的input获去图片

 <input type="file" onchange="getImages(this)">
 // 如果想一次选中多张可以使用属性 multiple

  function getImages(obj){
    let files = obj.files;
    let file = files[0];
    // 此处可以直接使用上面步骤上传到七牛云
  }

如果需要将图片转成base64,可以使用 FileReader

   function getImages(obj){
    let files = obj.files;
    let reader = new FileReader();
      reader.readAsDataURL(files[0]);
      reader.onload = function(){
        //读取完成后，数据保存在对象的result属性中
        // console.log(this.result);
        let img = document.createElement("img");
        img.src = this.result
        document.body.appendChild(img);
      }
  }