element-plus组件上传图片

最新推荐文章于 2025-09-11 04:46:44 发布

原创最新推荐文章于 2025-09-11 04:46:44 发布 · 948 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

本文详细介绍了如何使用Vue.js创建一个图片上传组件，包括设置上传接口、限制上传数量、文件类型检查、上传进度显示、删除图片的确认对话框等功能。通过示例代码展示了before-upload、on-success、on-change等关键事件的处理方法，帮助开发者理解并实现自定义的图片上传功能。

html

<el-upload
        list-type="picture-card"
        :action="'https://?pid=' + product_id"  // 上传图片的接口
        :on-change="handleChange"
        :on-success="handleSuccess"
        :before-upload="beforeUpload"
        :on-progress="uploadProcess"
        :before-remove="beforeRemove"
        :file-list="fileList"
        :multiple="true"
        limit="2"   // 上传图片的数量
      >
        <el-icon class="avatar-uploader-icon">
          <Plus />
        </el-icon>
      </el-upload>

// 可以在上传文件里console(fileList),会返回数据结构
 
const props = defineProps({
  product_id: Number,
});
const fileList = reactive([]); // 上传图片
 
 
const percent = ref(0);
// 上传前校验
const beforeUpload = (file) => {
  console.log('上传前端校验', file);
  const isLt2M = file.size / 1024 / 1024 < 2;
  const type = file.type;
  if (!isLt2M) {
    ElMessage.success({
      message: '上传图片不能超过2MB哦!',
    });
    return false;
  }
  //   if(type.includes('jpg'))
};
 
//上传成功回调
const handleSuccess = (res, file) => {
  console.log('handleSuccessres', res);
  console.log('handleSuccessfile', file);
  if (res) {
    ElMessage.success({
      message: '上传成功!',
    });
  } else {
    ElMessage.error({
      message: '上传失败，请重新上传',
    });
  }
};
//上传文件
const handleChange = (file, fileList) => {
  console.log('file---', file);
  console.log('fileList---', fileList);
};
// 上传时候的钩子
const uploadProcess = (event, file, fileList) => {
  // console.log(event.percent);
  percent.value = Math.floor(event.percent);
};
// 删除
const beforeRemove = (file, fileList) => {
  const result = new Promise((resolve, reject) => {
    ElMessageBox.confirm('此操作将删除该图片, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(() => {
        let index = fileList.indexOf(file);
        fileList.splice(index, 1);
        // 请求删除接口
      })
      .catch(() => {
        reject(false);
      });
  });
  return result;
};