element-plus组件上传图片

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>

js

// 可以在上传文件里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;
};