vue 图片上传预览/预览

NEWonclick

已于 2023-12-06 11:55:39 修改

阅读量1.3k

点赞数

分类专栏： JavaScript JS 文章标签： vue.js javascript

于 2022-08-23 11:53:02 首次发布

本文链接：https://blog.csdn.net/NEWonclick/article/details/126481781

版权

JS 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

这篇博客探讨了前端图片上传的实现过程，包括使用`<input type=file>`元素选择图片，通过`FileReader`预览图片。文章强调了文件大小的限制，指出当图片超过3MB时会触发警告，并展示了如何使用`canvas`进行图片压缩。压缩过程中，如果图片过大导致压缩失败，会有相应的错误提示。最后，提交按钮用于将压缩后的图片数组发送到后台。

摘要由CSDN通过智能技术生成

<div>
  <input class="upimage" multiple type="file" @change="uploadImage($event)" accept="image/*" />
  <div>
    <img class="image" v-for="item in imgSrc" :key="item" :src="item" />
  </div>
  <el-button @click="up()">提交</el-button>
</div>

export default {
  data() {
    return {
      imgSrc: []
    }
  },
  methods: {
    uploadImage(e) {
      let pd = false
      //上传图片并预览
      for(let i = 0; i < Object.values(e.target.files).length; i++){
        if(pd) continue;
        // 也可以使用createObjectURL获取临时路径
        // const url = URL.createObjectURL(e.target.files[i]);
        if(e.target.files[i].size / 1024 / 1024 >3){
          pd = true
          this.$message.warning('文件大小不得超过3M,请重新上传')
          continue;
        }
        let img = new FileReader();
        img.readAsDataURL(e.target.files[i]);
        
        img.onload = ({ target }) => {
          this.imgSrc.push(target.result);
        };
      }
    },
    up(){
      let param = {
        imgArr:this.imgSrc,
        name:'芝士雪豹',
      }
      
  },
}

.image {
  width: 130px;
  height: 130px;
}
 .upimage {
  width: 130px;
  height: 130px;
  background-color: black;
}

压缩图片

    async compressBase64(base64) {
      var that = this
      return new Promise(resolve => {
        const max = 100;
        const size = 1024 * 10
        let num = 0
        var newImage = new Image();
        var quality = 0.5; //压缩系数0-1之间
        newImage.src = base64;
        newImage.setAttribute("crossOrigin", "Anonymous"); //url为外域时需要
        newImage.onload = function () {
          var canvas = document.createElement("canvas");
          var ctx = canvas.getContext("2d");
          canvas.width = this.width;
          canvas.height = this.height;
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
          var base64 = canvas.toDataURL("image/jpeg",quality);
          while (base64.length / 1024 > size) {
            if(num > max){
              that.up = false;
              that.down = false;
              that.$message.warning('图片过大压缩失败')
              return
            }
            quality -= 0.01;
            num++
            base64 = canvas.toDataURL("image/jpeg", quality);
          }
          resolve(base64);
        };
      });
    },