Love__Tay 2024-06-13 10:23 采纳率: 68.8%
浏览 7
已结题

uniapp 附件上传

1、uniapp 文件上传,使用的插件是lsj-upload,设置只能上传一个文件。上传一个文件之后,点击×删除当前上传的文件,再上传时提示“只能上传一个”,不能再上传了,和预期不符。

img

img


2、相关代码:

<template>
  <view class="upload-view">
    <view>
      <template v-for="(item, index) in uploadFiles">
        <u-tag
          :key="`${childId}_${index}`"
          class="d-mb-10"
          type="primary"
          size="large"
          shape="square"
          :text="item.name"
          bgColor="rgba(225, 242, 255, 1)"
          color="rgba(38, 113, 238, 1)"
          closeColor="rgba(0, 0, 0, 1)"
          :closable="true"
          :show="true"
          @close="tagClick"
        ></u-tag>
      </template>
    </view>
    <lsj-upload
      :ref="childId"
      :childId="childId"
      :width="width"
      :height="height"
      :multiple="multiple"
      :formats="formats"
      :size="size"
      :count="count"
      :instantly="instantly"
      :debug="uploadDebug"
      :option="uploadOption"
      @uploadEnd="onuploadEnd"
    >
      <!-- <view class="btn" :style="{width: uploadWidth,height: uploadHeight}">上传附件</view> -->
      <u-button
        class="d-border-base-light-solid"
        style="{width: width,height: height}"
        :hairline="true"
        type="info"
        size="normal"
        shape="square"
        loadingMode="spinner"
        :loadingSize="15"
        icon="attach"
        >点击添加附件</u-button
      >
    </lsj-upload>
  </view>
</template>

<script>
import config from "@/config";
import { getToken } from "@/utils/token";
export default {
  name: "file-upload",
  props: {
    // 自动上传
    instantly: { type: Boolean, default: true },
    // 允许上传的文件格式(多个以逗号隔开)
    formats: {
      type: String,
      default: "pdf,doc,docx,xls,xlsx,png,jpg,bmp,jpeg",
    },
    // webviewID需唯一,不同窗口也不要同Id
    childId: { type: String, default: "lsjUpload" },
    // 文件选择触发面宽度
    width: { type: String, default: "100%" },
    // 文件选择触发面高度
    height: { type: String, default: "80rpx" },
    // 文件上传大小限制
    size: { type: Number, default: 50 },
    // 文件数量限制
    count: { type: Number, default: 1 },
    // 是否多选
    multiple: { type: Boolean, default: false },
  },
  data() {
    return {
      // 是否打印日志
      uploadDebug: false,
      // 上传接口参数
      uploadOption: {
        // 上传服务器地址,需要替换为你的接口地址
        url: config.apipath + "/api/upload/addFile",
        // 上传附件的key
        name: "file",
        // 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
        header: {
          // 示例参数可删除
          Authorization: getToken(),
        },
      },
      uploadFiles: [], //回传数组
      tabIndex: 0,
    };
  },
  methods: {
    //完成上传,不管成功或者失败,时间传递给父组件
    onuploadEnd(item) {
      let responseText = JSON.parse(item.responseText);
      if (responseText.code == 0) {
        this.uploadFiles = [responseText.data];
      }
      // 强制更新视图
      this.$forceUpdate();
      this.$emit("onuploadEnd", this.uploadFiles);
    },
    //移除某个文件
    tagClick(index) {
      //name=指定文件名,不传name默认移除所有文件
      if (index >= 0 && this.uploadFiles.length > 0) {
        this.uploadFiles.splice(index, 1);
        this.$emit("onuploadEnd", null);
      }
    },
  },
};
</script>

<style scoped>
.upload-view {
  padding-bottom: 2;
}
</style>

3、请问有小伙伴遇到类似的问题吗?感觉是删除的逻辑实现有问题,但不知道怎么改~ 谢谢

  • 写回答

5条回答 默认 最新

  • Love__Tay 2024-06-17 14:23
    关注

    根据需求,是多文件上传,修改了一下onuploadEnd方法,可以满足需求啦。

    
    <template>
      <view class="upload-view">
        <view>
          <template v-for="(item, index) in uploadFiles">
            <u-tag
              :key="`${childId}_${index}`"
              class="d-mb-10"
              type="primary"
              size="large"
              shape="square"
              :text="item.name"
              bgColor="rgba(225, 242, 255, 1)"
              color="rgba(38, 113, 238, 1)"
              closeColor="rgba(0, 0, 0, 1)"
              :closable="true"
              :show="true"
              @close="tagClick(index)"
            ></u-tag>
          </template>
        </view>
        <lsj-upload
          :ref="childId"
          :childId="childId"
          :width="width"
          :height="height"
          :multiple="multiple"
          :formats="formats"
          :size="size"
          :count="count"
          :instantly="instantly"
          :debug="uploadDebug"
          :option="uploadOption"
          @uploadEnd="onuploadEnd"
        >
          <!-- <view class="btn" :style="{width: uploadWidth,height: uploadHeight}">上传附件</view> -->
          <u-button
            class="d-border-base-light-solid"
            style="{width: width,height: height}"
            :hairline="true"
            type="info"
            size="normal"
            shape="square"
            loadingMode="spinner"
            :loadingSize="15"
            icon="attach"
            >点击添加附件</u-button
          >
        </lsj-upload>
      </view>
    </template>
    
    <script>
    import config from "@/config";
    import { getToken } from "@/utils/token";
    export default {
      name: "file-upload",
      props: {
        // 自动上传
        instantly: { type: Boolean, default: true },
        // 允许上传的文件格式(多个以逗号隔开)
        formats: {
          type: String,
          default: "pdf,doc,docx,xls,xlsx,png,jpg,bmp,jpeg",
        },
        // webviewID需唯一,不同窗口也不要同Id
        childId: { type: String, default: "lsjUpload" },
        // 文件选择触发面宽度
        width: { type: String, default: "100%" },
        // 文件选择触发面高度
        height: { type: String, default: "80rpx" },
        // 文件上传大小限制
        size: { type: Number, default: 50 },
        // 文件数量限制
        count: { type: Number, default: 1 },
        // 是否多选
        multiple: { type: Boolean, default: false },
      },
      data() {
        return {
          // 是否打印日志
          uploadDebug: false,
          // 上传接口参数
          uploadOption: {
            // 上传服务器地址,需要替换为你的接口地址
            url: config.apipath + "/api/upload/addFile",
            // 上传附件的key
            name: "file",
            // 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
            header: {
              // 示例参数可删除
              Authorization: getToken(),
            },
          },
          uploadFiles: [], //回传数组
        };
      },
      methods: {
        //完成上传,不管成功或者失败,时间传递给父组件
        onuploadEnd(item) {
          let responseText = JSON.parse(item.responseText);
          if (responseText.code == 0) {
            this.uploadFiles.push(responseText.data);
          }
          // 强制更新视图
          this.$forceUpdate();
          this.$emit("onuploadEnd", this.uploadFiles);
        },
        //标签删除按钮
        tagClick(index) {
          if (index >= 0 && this.uploadFiles.length > 0) {
            this.uploadFiles.splice(index, 1);
            this.$emit("onuploadEnd", null);
          }
        },
      },
    };
    </script>
    
    <style scoped>
    .upload-view {
      padding-bottom: 2;
    }
    </style>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题?

问题事件

  • 系统已结题 6月25日
  • 已采纳回答 6月17日
  • 创建了问题 6月13日

悬赏问题

  • ¥15 x264库中预测模式字IPM、运动向量差MVD、量化后的DCT系数的位置
  • ¥15 curl 命令调用正常,程序调用报 java.net.ConnectException: connection refused
  • ¥20 关于web前端如何播放二次加密m3u8视频的问题
  • ¥15 使用百度地图api 位置函数报错?
  • ¥15 metamask如何添加TRON自定义网络
  • ¥66 关于川崎机器人调速问题
  • ¥15 winFrom界面无法打开
  • ¥30 crossover21 ARM64版本安装软件问题
  • ¥15 mymetaobjecthandler没有进入
  • ¥15 mmo能不能做客户端怪物