用代码实现u-upload上传图片

可以使用以下代码实现u-upload上传图片：

HTML代码：

<input type="file" name="file" id="file" class="u-upload-input">
<button type="button" class="u-upload-btn">上传</button>

JavaScript代码：

var fileInput = document.getElementById('file');
var uploadBtn = document.querySelector('.u-upload-btn');

uploadBtn.addEventListener('click', function() {
  var file = fileInput.files[0];
  var formData = new FormData();
  formData.append('file', file);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload');
  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log('上传成功');
    } else {
      console.log('上传失败');
    }
  };
  xhr.send(formData);
});

相关问题

uniapp 使用u-upload上传图片时压缩

在uniapp中使用u-upload上传图片时，可以通过以下方式进行压缩：

1. 使用HTML5的canvas对图片进行压缩

可以通过以下代码将图片压缩到指定大小：

<template>
  <u-upload :before-upload="beforeUpload">
  </u-upload>
</template>
<script>
export default {
  methods: {
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        const canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d')
        const img = new Image()
        img.onload = () => {
          const targetWidth = 800 // 设置目标宽度
          const targetHeight = img.height * targetWidth / img.width // 计算目标高度
          canvas.width = targetWidth
          canvas.height = targetHeight
          ctx.clearRect(0, 0, targetWidth, targetHeight)
          ctx.drawImage(img, 0, 0, targetWidth, targetHeight)
          canvas.toBlob((blob) => {
            resolve(new File([blob], file.name, { type: file.type }))
          }, file.type, 0.7) // 0.7为压缩质量，可自行调整
        }
        img.src = URL.createObjectURL(file)
      })
    }
  }
}
</script>

2. 使用第三方库进行压缩

可以使用第三方库如compressorjs等进行图片压缩，具体使用方法可以参考官方文档。

注意：压缩图片会影响图片质量，请根据实际需求选择合适的压缩方式和质量。

uniapp如何根据数组数量动态循环使用多个u-upload上传和删除图片

在uni-app中，如果你需要根据数组的数量动态地显示多个`u-upload`组件并允许用户上传和删除图片，可以按照以下步骤操作：

1. 首先，创建一个包含多个`u-upload`组件的template结构，比如一个for循环，遍历你的图片数组:

<view v-for="(item, index) in images" :key="index">
  <u-upload :action="'your/upload/url'" :multiple="true" :file-list="item.files" @on-success="handleSuccess(index)" @on-error="handleError(index)">
    <button slot="trigger">选择图片</button>
  </u-upload>
  <button @click="deleteImage(index)">删除图片</button>
</view>

这里假设`images`是一个数组，存储了每个元素的文件列表。

2. 使用Vue的数据绑定和事件监听器，处理上传和删除事件:

export default {
  data() {
    return {
      images: [{ files: [] }] // 初始数据至少包含一个空数组
    };
  },
  
  methods: {
    handleSuccess(index, response) {
      const updatedImage = { ...this.images[index], files: response.data }; // 根据服务器返回更新文件列表
      this.images.push(updatedImage); // 如果有新增图片，追加到数组末尾
    },
    
    handleError(index, error) {
      console.error('Upload failed:', error);
    },
    
    deleteImage(index) {
      this.images.splice(index, 1); // 删除指定索引的图片
    }
  }
}

在上述代码中，`handleSuccess`处理上传成功后的更新，`handleError`处理错误，而`deleteImage`用于从数组中移除图片。