【工具】vue 文件上传(单个/多个)，拖拽上传

最新推荐文章于 2024-03-20 15:32:34 发布
最新推荐文章于 2024-03-20 15:32:34 发布
阅读量4.7k 收藏 10
点赞数 3
分类专栏： vue工作 文章标签： vue 文件上传 文件单传 文件多传 组件工具 拖拽上传
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/thcoding_cat/article/details/119777336
版权

本文单传组件取自若依微服务为版ruoyi-ui：介绍 | RuoYi

环境：

  • vue@2.6.12 

  • element-ui@2.15.3

 1.文件上传(单个)

 组件代码：

//components/FileUpload

<template>
  <div class="upload-file">
    <el-upload
      :accept="accept"
      :action="uploadFileUrl"
      :before-upload="handleBeforeUpload"
      :file-list="fileList"
      :limit="1"
      :on-error="handleUploadError"
      :on-exceed="handleExceed"
      :on-success="handleUploadSuccess"
      :show-file-list="false"
      :headers="headers"
      class="upload-file-uploader"
      ref="upload"
    >
      <!-- 上传按钮 -->
      <el-button size="mini" type="primary">选取文件</el-button>
      <!-- 上传提示 -->
      <div class="el-upload__tip" slot="tip" v-if="showTip">
        请上传
        <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
        <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
        的文件
      </div>
    </el-upload>

    <!-- 文件列表 -->
    <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
      <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in list">
        <el-link :href="file.url" :underline="false" target="_blank">
          <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
        </el-link>
        <div class="ele-upload-list__item-content-action">
          <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
        </div>
      </li>
    </transition-group>
  </div>
</template>

<script>
/**
 * 文件单传
 */
import { getToken } from "@/utils/auth";
export default {
  props: {
    // 值
    value: [String, Object, Array],
    // 接收文件类型·
    accept:{
      type: String,
      default: ''
    },
    // 大小限制(MB)
    fileSize: {
      type: Number,
      default: 5,
    },
    // 文件类型, 例如['png', 'jpg', 'jpeg']
    fileType: {
      type: Array,
      default: () => ["doc", "xls", "ppt", "txt", "pdf"],
    },
    // 是否显示提示
    isShowTip: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      fileList: [],
    };
  },
  computed: {
    // 是否显示提示
    showTip() {
      return this.isShowTip && (this.fileType || this.fileSize);
    },
    // 列表
    list() {
      let temp = 1;
      if (this.value) {
        // 首先将值转为数组
        const list = Array.isArray(this.value) ? this.value : [this.value];
        // 然后将数组转为对象数组
        return list.map((item) => {
          if (typeof item === "string") {
            item = { name: item, url: item };
          }
          item.uid = item.uid || new Date().getTime() + temp++;
          return item;
        });
      } else {
        this.fileList = [];
        return [];
      }
    },
  },
  methods: {
    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      // 校检文件类型
      if (this.fileType) {
        let fileExtension = "";
        if (file.name.lastIndexOf(".") > -1) {
          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
        }
        const isTypeOk = this.fileType.some((type) => {
          if (file.type.indexOf(type) > -1) return true;
          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
          return false;
        });
        if (!isTypeOk) {
          this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
          return false;
        }
      }
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      return true;
    },
    // 文件个数超出
    handleExceed() {
      this.$message.error(`只允许上传单个文件`);
    },
    // 上传失败
    handleUploadError(err) {
      this.$message.error("上传失败, 请重试");
    },
    // 上传成功回调
    handleUploadSuccess(res, file) {
      this.$message.success("上传成功");
      this.$emit("input", res.data.url);
    },
    // 删除文件
    handleDelete(index) {
      this.fileList.splice(index, 1);
      this.$emit("input", '');
    },
    // 获取文件名称
    getFileName(name) {
      if (name.lastIndexOf("/") > -1) {
        return name.slice(name.lastIndexOf("/") + 1).toLowerCase();
      } else {
        return "";
      }
    }
  },
  created() {
    this.fileList = this.list;
  },
};
</script>

<style scoped lang="scss">
.upload-file-uploader {
  margin-bottom: 5px;
}
.upload-file-list .el-upload-list__item {
  border: 1px solid #e4e7ed;
  line-height: 2;
  margin-bottom: 10px;
  position: relative;
}
.upload-file-list .ele-upload-list__item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: inherit;
}
.ele-upload-list__item-content-action .el-link {
  margin-right: 10px;
}
</style>

 使用：

import FileUpload from '@/components/FileUpload';

export default {
  components: {
    FileUpload,
  }
}

<template>
  <FilesUpload 
      v-model="form.fileUrl"  
      accept=".pdf"
      :fileType="['pdf']"
   />
</template>

结果呈现：无

2.文件上传(多个)

该组件基于若依微服务版ruoyi-ui进行改造  

组件代码：

//components/FilesUpload
<template>
  <div class="upload-file">
    <el-upload
      multiple
      :accept="accept"
      :action="uploadFileUrl"
      :before-upload="handleBeforeUpload"
      :file-list="fileList"
      :on-error="handleUploadError"
      :on-success="handleUploadSuccess"
      :show-file-list="false"
      :headers="headers"
      class="upload-file-uploader"
      ref="upload"
    >
      <!-- 上传按钮 -->
      <el-button size="mini" type="primary">选取文件</el-button>
      <!-- 上传提示 -->
      <div class="el-upload__tip" slot="tip" v-if="showTip">
        请上传
        <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
        <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
        的文件
      </div>
    </el-upload>

    <!-- 文件列表 -->
    <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
      <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in list">
        <el-link :href="file.url" :underline="false" target="_blank">
          <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
        </el-link>
        <div class="ele-upload-list__item-content-action">
          <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
        </div>
      </li>
    </transition-group>
  </div>
</template>

<script>
/**
 * 文件多传
 */
import { getToken } from "@/utils/auth";
export default {
  props: {
    // 值
    value: {
      type: Array,
      default(){
        return []
      }
    },
    // 接收文件类型·
    accept:{
      type: String,
      default: ''
    },
    // 大小限制(MB)
    fileSize: {
      type: Number,
      default: 5,
    },
    // 文件类型, 例如['png', 'jpg', 'jpeg']
    fileType: {
      type: Array,
      default: () => ["doc", "xls", "ppt", "txt", "pdf"],
    },
    // 是否显示提示
    isShowTip: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      fileList: [],
    };
  },
  computed: {
    // 是否显示提示
    showTip() {
      return this.isShowTip && (this.fileType || this.fileSize);
    },
    // 列表
    list() {
      let temp = 1;
      if (this.value) {
        // 首先将值转为数组
        const list = Array.isArray(this.value) ? this.value : [this.value];
        // 然后将数组转为对象数组
        return list.map((item) => {
          if (typeof item === "string") {
            item = { name: item, url: item };
          }
          item.uid = item.uid || new Date().getTime() + temp++;
          return item;
        });
      } else {
        this.fileList = [];
        return [];
      }
    },
    valueList(){
      return this.value;
    }
  },
  methods: {
    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      // 校检文件类型
      if (this.fileType) {
        let fileExtension = "";
        if (file.name.lastIndexOf(".") > -1) {
          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
        }
        const isTypeOk = this.fileType.some((type) => {
          if (file.type.indexOf(type) > -1) return true;
          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
          return false;
        });
        if (!isTypeOk) {
          this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
          return false;
        }
      }
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      return true;
    },
    // 上传失败
    handleUploadError(err) {
      this.$message.error("上传失败, 请重试");
    },
    // 上传成功回调
    handleUploadSuccess(res, file) {
      this.$message.success("上传成功");
      this.valueList.push(res.data.url);
      this.$emit("input",this.valueList);
    },
    // 删除文件
    handleDelete(index) {
      this.fileList.splice(index, 1);
      this.valueList.splice(index,1);

      this.$emit("input", this.valueList);
    },
    // 获取文件名称
    getFileName(name) {
      if (name.lastIndexOf("/") > -1) {
        return name.slice(name.lastIndexOf("/") + 1).toLowerCase();
      } else {
        return "";
      }
    }
  },
  created() {
    this.fileList = this.list;
  },
};
</script>

<style scoped lang="scss">
.upload-file-uploader {
  margin-bottom: 5px;
}
.upload-file-list .el-upload-list__item {
  border: 1px solid #e4e7ed;
  line-height: 2;
  margin-bottom: 10px;
  position: relative;
}
.upload-file-list .ele-upload-list__item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: inherit;
}
.ele-upload-list__item-content-action .el-link {
  margin-right: 10px;
}
</style>

使用：

import FilesUpload from '@/components/FilesUpload';

export default {
   components: {
    FilesUpload,
  }
}

<template>
   <FilesUpload 
      v-model="form.files"  
      accept=".pdf"
      :fileType="['pdf']"
   />
</template>

 结果呈现：

3.拖拽上传

组件代码：

//components/DragUpload

<template>
   <el-row>
       <el-upload
        accept=".ipa,.apk"
        :action="uploadImgUrl"
        :headers="headers"
        :on-remove="removeImage"  
        :on-success="handleUploadSuccess"
        :before-upload="handleBeforeUpload"
        :on-error="handleUploadError"
        drag
        >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip" v-if="showTip">
                只能上传<b style="color: #f56c6c">{{ fileType.join("/") }}</b>文件，
                且不超过<b style="color: #f56c6c">{{ fileSize }}MB</b>
            </div>
        </el-upload>
   </el-row>
</template>

<script>
// 上传应用
import { getToken } from "@/utils/auth";
export default {
    data() {
    return {
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      fileType: ["ipa", "apk"]
    };
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    // 大小限制(MB)
    fileSize: {
      type: Number,
      default: 600,
    },
    // 是否显示提示
    isShowTip: {
      type: Boolean,
      default: true,
    },
  },
  computed:{
    // 是否显示提示
    showTip() {
      return this.isShowTip && (this.fileType || this.fileSize);
    }
  },
  methods:{
      removeImage() {
      this.$emit("input", "");
    },
    handleUploadSuccess(res) {
      this.$emit("input", res.data.url);
      this.loading.close();
    },
    handleBeforeUpload() {
      this.loading = this.$loading({
        lock: true,
        text: "上传中",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    handleUploadError() {
      this.$message({
        type: "error",
        message: "上传失败",
      });
      this.loading.close();
    },
  }
}
</script>

 使用：

import DragUpload from "@/components/DragUpload";

export default {
  components: {
    DragUpload,
  }
}

<template>
  <DragUpload v-model="appurl" />
</template>

结果呈现：

谭CV
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
Vue实现带进度条的文件拖动上传功能
08-27
主要介绍了Vue实现带进度条的文件拖动上传功能,本文通过实例代码给大家介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下
Vue3文件拖拽上传
明知山
10-26 3976
【代码】Vue3文件拖拽上传。
如何在Vue 2中处理文件上传
若晨工作室
12-11 7497
在Vue中处理文件上传是一件容易的任务！在本文中，我们将讨论如何使用VueJs处理文件上传。我们将创建一个图像上传器，允许用户通过拖放或选择文件对话框上传单个或多个图像文件。然后，我们将上传所选图像并相应地显示它们。我们还将学习过滤上传文件类型，例如，我们只允许图像，不允许像PDF这样的文件类型。源代码：https：//github.com/chybie/file-upload-vue演示：http
vue 文件上传 el-upload（单个文件）
最新发布
好记性，不如烂键盘。
03-20 247
vue 文件上传 el-upload（单个文件）
javaWeb实战教程5-fileupload文件上传
qq_18987563的博客
06-30 389
javaWeb实战教程2.8 commons-fileupload文件上传Servlet 可以与 HTML form 标签一起使用，来允许用户上传文件到服务器。上传的文件可以是文本文件或图像文件或任何文档。需要引入的 jar 文件：commons-fileupload-1.3.2、commons-io-2.4.jar。在网站根目录WebContent下新建html：lesson8_fileuploa
若依文件上传upload加回显一体化组件
qq_1336674576的博客
06-16 838
若依文件上传upload加回显一体化组件
上传文件及文件类型判断(基于vue3)
一名渣渣程序员
09-19 2131
上传文件及文件类型判断(基于vue3)
使用FormData实现上传多个文件
10-17
主要为大家详细介绍了使用FormData实现上传多个文件功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue+element实现大文件上传
07-04
vue+element实现大文件上传
vue+springboot 大文件上传
01-23
使用springboot+vue技术，实现分片 快速上传
springboot+vue实现文件上传下载
01-18
本文实例为大家分享了springboot+vue实现文件上传下载的具体代码，供大家参考，具体内容如下 一、文件上传（基于axios的简单上传） 所使用的技术：axios、springboot、vue; 实现思路：通过h5 ：input元素标签进行...
【vue && vue-pdf】解决pdf预览时的跨域问题
热门推荐
代码随想录
02-22 1万+
问题： pdf预览引起跨域 当时出问题时没截图，现在的图从网络上截取的 和vue 接口请求解决跨域问题一样，在本地开发时同样通过 webpack的devServer去代理pdf预览的url（请求），其他环境（生成及测试）则让后端去解决。 解决开发环境pdf预览跨域问题就是在devServer中添加一个代理即可： //vue.config.js proxy: { //数据接口代理 '/api': { target:
【vue】在vue项目直接使用html文件
代码随想录
04-30 8304
1.在public目录中新建html文件夹，放入html文件 2.在main.js加入访问路径 Vue.prototype.$publicURL = './'; 3.在vue组件中使用跳转 <a href="javascript:void(0)" @click="jumpOutsideLink(`${$publicURL}html/xxxx.html`,'xxxx协议')">《xxxx协议》</a> //mixin中方法 使用window.open进行跳转 .
vue 萤石云视频监控对接
代码随想录
09-09 7432
萤石云文档(web开发) 参考博客：https://www.jianshu.com/p/5b104ce25724 参考博客：https://www.jianshu.com/p/00b6331f3aff
vxe-table使用碰到的问题
代码随想录
06-09 4126
vxe-table踩坑
【vue && 弹窗】vue项目弹窗中的组件编辑ref值却获取不到
代码随想录
03-10 3724
vue项目中点击打开弹窗，弹窗上面有子组件，在点击打开弹窗的方法中使用this.$refs却获取不到子组件的ref值： 简易代码如下： <a-modal centered v-model="visible" :title="title"> <upload ref="upload" /> </a-modal> js: handleOpenUpload(){ this.visibleUpload = tr..
【vue】配置cdn加速
代码随想录
11-10 3488
//vue.config.js let cdn = { css: [], js: [] }; // 通过环境变量 来区分是否使用cdn const isDev = process.env.NODE_ENV === 'development'; // 判断是否是开发环境 let externals = {}; if (!isDev) { // 如果是非开发环境 就排除打包 否则不排除 externals = { // key(包名) / value(这个值 是 需要在CDN中获取js, 相.
【工具】vue excel导入通用组件-模板导出组件
代码随想录
08-18 2814
环境： vue@2.6.12 [email protected] 1.excel导入 组件代码： //components/ExcelImport <template> <div class="component-upload-image"> <el-upload accept=".xls,.xlsx" :action="uploadImgUrl" :on-success="handleUploadSucc.
vue文件上传多个pdf文件
07-28
在Vue中实现多个PDF文件的上传可以使用`<input type="file" multiple>`元素结合`FormData`对象和`axios`库来实现。 首先，在你的Vue组件模板中添加一个文件选择输入框： ```html ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值