VUE element组件图片上传

   <el-upload
       list-type="picture-card"
       action="https://scienicpc.kuxia.top/pcapi/File/fileimg"//所请求的接口
       :on-change="handleChange"
       :before-remove="beforeRemove"//图片删除
       :on-preview="handlePictureCardPreview"//图片预览
       :file-list="fileList"//图片
       multiple
        limit="1"//最大限制
        name="img"
    >

const handleChange = (file: { status; response: { front_file } }) => {
  if (file.status == 'success') {
    // fileList.value.push({ url: file.response.front_file });
    filed.value = fileList.value[0].response.front_file;//filed.value是定义的图片
  }
  // console.log(fileList.value);
};
// 删除
const beforeRemove = () => {
  const result = new Promise((resolve, reject) => {
    ElMessageBox.confirm('此操作将删除该图片, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(() => {
        resolve();
      })
      .catch(() => {
        reject(false);
      });
  });
  return result;
};
// 单张图片和多张图片预览
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};