TDesign----上传组件，批量上传但不自动上传

最新推荐文章于 2025-07-20 19:42:11 发布

二条学前端

最新推荐文章于 2025-07-20 19:42:11 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： tdesign

本文链接：https://blog.youkuaiyun.com/Gunba1/article/details/134187194

本文介绍了如何使用TDesign上传组件进行批量上传，同时控制不自动上传，通过调整`multiple`,`auto-upload`,和其他相关参数，以及后端接口交互，实现用户在提交文字内容后手动上传图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，我解释一下，什么叫批量上传但不自动长传。类似于一个表单，有文字有图片，后端要求，点击提交时，先发送文字部分的内容，返回一个id给你，再通过这个id上传一张或几张图片。

1.TDesign的上传组件

TDesign确实有批量上传但不自动上传的组件，但是他会多两个按钮"取消上传","点击上传"，我当时也是想通过这个组件来实现，但是我再怎么也去不掉这两个按钮，或者去掉了，就自动上传了。也不能说，让两个按钮留着，让用户点击完”提交“再点一下"点击上传"吧

最后通过这个组件来进行改造的。

2.改造组件

不想批量上传，auto-upload设置为"false"
然后解释一下其他几个参数的意思：

multiple: 这是一个布尔属性，如果设置为true，则允许用户在文件选择对话框中选择多个文件。如果设置为false，用户只能选择一个文件。这通常用于指定是否支持批量上传。
allow-upload-duplicate-file: 这也是一个布尔属性，如果设置为true，则允许用户上传相同的文件多次。如果设置为false，则不允许上传重复的文件。这通常用于确定是否允许上传文件的重复副本。
one-file-success: 多文件上传，一个文件一个请求场景，每个文件也会单独触发上传成功的事件。
showThumbnail: 这是一个布尔属性，如果设置为true，则在上传组件中显示文件的缩略图（通常用于图像文件）。如果设置为false，则不显示文件的缩略图。

<div class="upload">
          <p>上传截图:</p>
          <t-upload
            ref="uploadRef"
            v-model="files"
            :action="upload.actionUrl"
            :data="upload.data"
            :multiple="multiple"
            :auto-upload="false"
            :size-limit="{ size: 10, unit: 'MB' }"
            :max="3"
            :allow-upload-duplicate-file="true"
            @fail="handleFail"
            @success="handleSuccess"
            @one-file-success="onOneFileSuccess"
            :theme="'image'"
            :showThumbnail="true"
            @remove="deleteImg"
            class="upload_image"
          />
        </div>
        <div class="btn">
            <t-button @click="submit" v-else>提交反馈</t-button>
        </div>

const uploadRef = ref();
const files = ref([]);
const multiple = ref(true);
const upload = reactive({
  actionUrl: window.location.origin + `这里写后端给的接口`,
  data: {
    意见反馈id: "",
  },//data里面是上传图片时，需要带的参数
});
const uploadFiles = () => {
  uploadRef.value.uploadFiles();
};
const handleFail = ({ file }) => {
  MessagePlugin.error(`文件 ${file.name} 上传失败`);
};
const handleSuccess = (params) => {
  MessagePlugin.success("提交成功");//这个函数是在uploadFiles 成功调用之后才会调用
};
const onOneFileSuccess = (params) => {
  //   console.log("onOneFileSuccess", params);
};

//删除图片
const deleteImg = (e) => {
  
};

//提交反馈
const submit = () => {
  //这里先请求文字内容部分的接口，获取后端返回的id
  $_updateFeedbackDetail({
    意见反馈id: "",
    data: {
      子系统名: palte.value,
      内容: textareaValue.value,
    },
  }).then((res) => {
    if (res.data.msg == "成功") {
      upload.data.意见反馈id = res.data.data;
      if (files.value.length > 0) {//为什么要写>0，因为有可能用户不上传图片，那就不需要调用上传图片的函数了
        uploadFiles();//后端返回id成功之后，再调用上传图片的函数
      }    
    }
  });
};

好了，参考代码试试吧