vue3实现附件上传简单代码示例【自用】

骨子里的偏爱

已于 2024-08-22 15:51:44 修改

阅读量60

点赞数 1

分类专栏： vue 文章标签： vue elementui

于 2024-08-22 15:46:38 首次发布

本文链接：https://blog.csdn.net/weixin_41823246/article/details/141430054

版权

vue 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

vue3实现附件上传简单代码示例

<el-form-item label="上传附件" prop="enclosure">
          <el-upload
            v-model:file-list="enclosureFileList"
            class="upload-demo"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            multiple
            :on-preview="handlePreview"
            :on-remove="handleEnclosureRemove"
            :before-remove="beforeRemove"
            :limit="3"
            :on-exceed="handleExceed"
          >
            <el-button type="primary">上 传</el-button>
            <template #tip>
              <div class="el-upload__tip">
                jpg/png/doc/jpeg/pdf, and files with a size less than 500KB.
              </div>
            </template>
          </el-upload>
        </el-form-item>

<script>
// 附件
const enclosureFileList = ref<UploadUserFile[]>([
  {
    name: "element-plus-logo.svg",
    url: "https://element-plus.org/images/element-plus-logo.svg",
  },
  {
    name: "element-plus-logo2.svg",
    url: "https://element-plus.org/images/element-plus-logo.svg",
  },
]);

// 上传附件
const handleEnclosureRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
  console.log(file, uploadFiles);
};

const handlePreview: UploadProps["onPreview"] = (uploadFile) => {
  console.log(uploadFile);
};

const handleExceed: UploadProps["onExceed"] = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  );
};

const beforeRemove: UploadProps["beforeRemove"] = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(
    `Cancel the transfer of ${uploadFile.name} ?`
  ).then(
    () => true,
    () => false
  );
};
</script>