vue图片上传缩略图以及进度条的实现

本文链接： https://blog.csdn.net/Red_sevenWord/article/details/82841254

首先是图片的上传(结构）其中add_img函数的参数由自己决定。

<input type="file" id="idfront" @change.self='add_img($event, 0, key)'>

<progress :value="progress" max="100" v-show="showp"></progress>

然后来看js当中的内容要怎么写
data (){}里面的return中可以先写一个固定的默认图片路径src，等拿到返回url的时候再替换为需要的缩略图

data () {
    return {
      formNum: ['1'],
      showp: true,
      progress: '',
      imgData: {accept: 'image/jpeg, image/png, image/jpg'},
      src: require('../../../../assets/images/camera.png'),
      info: {
      	imgup: ''
      }
    };
  }

add_img (event, key, index) {
      let _this = this
      var files = event.target.files[0]
      if (!event || !window.FileReader) return  // 看支持不支持FileReader
      let reader = new FileReader()
      reader.readAsDataURL(files) // 这里是最关键的一步，转换就在这里
      reader.onloadend = function () {
        _this.src = this.result
      }
      //以上是缩略图部分代码this.result就是url，赋值给了默认的src
      
      let img1 = event.target.files[0];
      let type = img1.type;
      let size = img1.size;
      if (this.imgData.accept.indexOf(type) === -1) {  
       	console.log('支持上传的格式不对')；
        return false;  
      }  
      //以上对图片格式的限制，imgData在return里面可见
       if (size>5242880) {  
       console.log('上传图片不能大于5m')
        return false;  
      }  
      //以上对图片大小的限制
      let form = new FormData();
      form.append('file',img1);
      axios.post(baseUrl,form,{
        headers:{'Content-Type':'multipart/form-data'},
        withCredentials:true
        onUploadProgress: progressEvent => {
          var complete = (progressEvent.loaded / progressEvent.total * 100 | 0);
          console.log(complete)  //complete是一个变化的值，最大100上传完成
          this.progress = complete  //赋值，进度条变化，通过值或者其他事件还可以用showp使得进度条是否隐藏
        }
      }).then(response => {  
        let url = response.data.data.file_url;//上传成功的返回url
        if (key === 0) {
          this.info.imgup = url;
        } 
     	console.log('上传成功')
      }).catch(error => {  
        console.log('失败'error)
      })     
       //还可以在其中尝试更多的东西我暂时尝试到这里了
}

基本就到这里就结束了，附加我在网上找到的进度条的兼容样式写法

	progress {
        width: 100%;
        border-top: 1px solid #0086ff;  
        border-bottom: 1px solid #0086ff;  
        background-color:#e6e6e6;
        color: #0086ff; /*IE10*/
    }
    progress::-moz-progress-bar { background: #0086ff; }
    progress::-webkit-progress-bar { background: #e6e6e6; }
    progress::-webkit-progress-value  { background: #0086ff; }
    /*我用的是上面这几句，下面是网站找到的我也没有试过，有兴趣的可以去试试*/
    
    /*ie6-ie9*/
	progress ie {
	    display:block;
	    height: 100%;
	    background: #0064B4;
	}
	progress::-moz-progress-bar { background: #0064B4; }
	progress::-webkit-progress-bar { background: #e6e6e6; }
	progress::-webkit-progress-value  { background: #0064B4; }

加一张图，是别人总结的@张鑫旭

vue图片上传缩略图以及进度条的实现

猜你喜欢