Vue는 요소 구성 요소를 사용하여 사진을 업로드합니다.

   최근에 사진을 업로드하는 기능을 구현하기 위한 배경 관리 프로젝트가 있는데, 이 기능을 Element 컴포넌트로 구현했습니다.

  이렘트 공식 홈페이지          

     

 작업 속성은 인터페이스 문서의 업로드된 사진과 결합되어야 합니다. 그렇지 않으면 빈 페이지를 업로드하게 됩니다.

 전체 코드는 다음과 같습니다.

<template>
 <div>
      <p>商品图片：</p>
      <div class="commodity_img">
        <!-- 上传图片 -->
        <el-upload
          list-type="picture-card"
          :action="'/pcapi/File/fileimg'"
          :on-change="handleChange"
          :before-remove="beforeRemove"
          :on-preview="handlePictureCardPreview"
          :file-list="fileList"
          multiple
          limit="1"
          name="img"
        >
          <el-icon class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </div>
    </div>
</template>

<script setup>
import { Plus } from "@element-plus/icons-vue";
import { ElMessageBox } from "element-plus";


// 上传图片
const fileList = ref([]);

//上传文件
const handleChange = (file: {
  status;
  response: { front_file };
}) => {
  if (file.status == "success") {
    fileList.value.push({ url: file.response.front_file });
  }
  // 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 = (uploadFile: { url }) => {
  dialogImageUrl.value = uploadFile.url;
  dialogVisibles.value = true;
};

</script>