• 日期: 2024-10-25 18:13:29
  • 标签: 常规

{ "title": "<a-upload multiple accept="image/png, image/jpeg" :action="uploadImgURL" list-type="picture-card" :file-list="photo" @preview="handleImgPreview" @change="handleImgChange" > <div v-if="photo.length < 5" class="feed_upload"> <a-icon :type="'plus'" /> <div class="ant-upload-text">上传

", "description": "data () { return { uploadImgURL: window._CONFIG['domainUrl']+/sys/common/upload", } 帮我写一个压缩图片的函数，并将压缩后的图片上传服务器内容：下面是一个压缩图片并上传服务器的函数示例:

compressAndUploadImage(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (event) => {
      const img = new Image();
      img.src = event.target.result;
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = 800; // 设置压缩后的宽度
        canvas.height = img.height * (canvas.width / img.width);
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        canvas.toBlob((blob) => {
          const formData = new FormData();
          formData.append('file', blob, file.name);
          fetch(this.uploadImgURL, {
            method: 'POST',
            body: formData,
          })
          .then(response => response.json())
          .then(data => {
            resolve(data); // 返回上传成功的结果
          })
          .catch(error => {
            reject(error); // 返回上传失败的结果
          });
        }, 'image/jpeg', 0.9); // 设置压缩后的图片格式和质量
      };
    };
    reader.readAsDataURL(file);
  });
}

你可以在handleImgChange方法中调用这个函数来压缩并上传图片，示例代码如下：

handleImgChange(e) {
  const files = e.target.files || e.dataTransfer.files;
  if (!files.length) return;
  
  const uploadPromises = [];
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    uploadPromises.push(this.compressAndUploadImage(file));
  }
  
  Promise.all(uploadPromises)
    .then(results => {
      console.log('上传成功', results);
      // 处理上传成功后的逻辑
    })
    .catch(error => {
      console.error('上传失败', error);
      // 处理上传失败后的逻辑
    });
}

请注意，上述代码的压缩图片的宽度为800像素，图片格式为JPEG，质量为0.9。你可以根据需要自行调整这些参数。

Vue.js 中使用 A-Upload 组件压缩并上传图片

原文地址: https://www.cveoy.top/t/topic/qepu 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录