AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

vue2_二次封装a-upload组件，自定义上传预览

2024-04-25 471
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： vue2_二次封装a-upload组件，自定义上传预览

前言

大家好，我是yma16，本文分享二次封装a-upload组件，自定义上传预览。

效果

编辑

预览

不展示删除和上传

空数据

自定义图片样式

vue2 引入 andesign

要在Vue2中引入Ant Design，需要遵循以下步骤：

  1. 安装Ant Design Vue

使用npm或者yarn安装Ant Design Vue：

npm install ant-design-vue --save

或

yarn add ant-design-vue
  1. 引入Ant Design Vue

在Vue应用程序的入口文件中，你需要引入Ant Design Vue的主题文件以及CSS文件：

import Vue from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);
  1. 使用Ant Design Vue组件

现在你可以在Vue组件中使用Ant Design Vue组件了，例如：

<template>
  <a-button type="primary">Primary Button</a-button>
</template>
<script>
export default {
  name: 'MyComponent'
}
</script>

这样就可以在Vue2中使用Ant Design Vue了。

自定义上传customRequest

入参是本地上传的文件流

async customRequest(file) {
      const form = new FormData()
      form.append('file', file.file)
      form.append('name', file.name)
      try {
        this.uploadLoading = true
        const res = await postAction(this.uploadActionUrl, form)
        if (res.success) {
          this.picUrl = true
          const length = this.fileList.length
          const url = getFileAccessHttpUrl(res.message)
          const type = res.message ? res.message.split('.')[res.message.split('.').length - 1] : 'null'
          const addFile = {
            uid: new Date().valueOf(),
            type: type,
            name: this.renderDisplayName(file.file.name),
            status: 'done',
            response: {
              status: 'done',
              message: res.message,
            },
            url: url,
            message: res.message,
            index: length,
          }
          this.fileList.push(addFile)
          this.$message.success('上传成功')
          this.$emit('change', this.fileList.map((item) => item.message).join(','))
        } else {
          this.$message.error('上传失败')
        }
        this.uploadLoading = false
      } catch (r) {
        this.uploadLoading = false
        this.$message.error('上传失败')
        console.warn(r)
      }
    }

transformFile上传前修改文件流

入参是本地上传的文件流

这里我修改文件流的名称，返回file的promise

transformFile(file) {
      return new Promise((resolve) => {
        const currentTime = new Date()
        const type = file.type.split('/')
        const renameFile = new File([file], currentTime.valueOf() + '.' + type[1], { type: file.type })
        resolve(renameFile)
      })
    }

自定义预览

handlePreview(file) {
      return new Promise((resolve, reject) => {
        try {
          resolve(this.previewFile(file))
        } catch (r) {
          reject(r)
        }
      })
    },

调整props和a-uoload一致

<template>
  <div style="display: inline-block">
    <div>
      <a-upload
        name="file"
        :accept="accept"
        :multiple="isMultiple"
        :disabled="disabled"
        :headers="headers"
        :fileList="[]"
        :customRequest="customRequest"
        :beforeUpload="beforeUpload"
        :remove="handleDelete"
        :transformFile="transformFile"
      >
        <a-button :loading="uploadLoading" v-if="!disabled && isMultiple && fileList.length < limit">
          <a-icon type="upload" /> {{text}}
        </a-button>
      </a-upload>
      <template v-if="fileList.length">
        <div v-for="(item, index) in fileList" :key="index" class="file-list-box">
          <img v-if="isImg(item.type)" :src="item.url" class="upload-icon-view" />
          <a-icon v-else-if="isPdf(item.type)" class="upload-icon-view" type="file" />
          <a-tooltip :title="item.name">
            <span class="upload-name-view">{{ item.name }}</span>
          </a-tooltip>
          <a-tooltip title="预览">
            <span style="color: #0071fc; margin: 0 20px"><a-icon type="eye" @click="handlePreview(item)" /></span>
          </a-tooltip>
          <a-tooltip title="删除">
            <span style="color: #f5222d" v-if="!disabled"><a-icon type="delete" @click="handleDelete(item)" /></span>
          </a-tooltip>
        </div>
      </template>
      <template v-else-if="disabled">
        <div style="text-align: left">
          <img :src="require('@/assets/gaoxinImgs/null-content.png')" alt="暂无数据" style="max-width: 100px" />
          <p style="text-align: center; width: 100px">暂无数据</p>
        </div>
      </template>
    </div>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="图片" style="width: 100%; height: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>
<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { postAction, getFileAccessHttpUrl, getAction } from '@/api/manage'
const uidGenerator = () => {
  return '-' + parseInt(Math.random() * 10000 + 1, 10)
}
const getFileName = (path) => {
  if (path.lastIndexOf('\\') >= 0) {
    let reg = new RegExp('\\\\', 'g')
    path = path.replace(reg, '/')
  }
  return path.substring(path.lastIndexOf('/') + 1)
}
export default {
  name: 'JFileUpload',
  data() {
    return {
      url: window._CONFIG['pdfDomainURL'],
      staticUrl: window._CONFIG['pdfPreviewURL'],
      id: 'pdfFilePreviewIframeId',
      fileName: '',
      uploadAction: window._CONFIG['domianURL'] + '/sys/common/upload',
      uploadActionUrl: '/sys/common/upload',
      uploadLoading: false,
      picUrl: false,
      headers: {},
      token: {},
      fileList: [],
      previewImage: '',
      previewVisible: false,
    }
  },
  props: {
    accept: {
      type: String,
      default: () => 'image/*,.pdf',
    },
    limit: {
      type: Number,
      default: 10,
    },
    text: {
      type: String,
      required: false,
      default: '上传附件（图片、pdf）',
    },
    /*这个属性用于控制文件上传的业务路径*/
    bizPath: {
      type: String,
      required: false,
      default: 'temp',
    },
    value: {
      type: [String, Array],
      required: false,
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false,
    },
    isMultiple: {
      type: Boolean,
      required: false,
      default: true,
    },
  },
  watch: {
    value: {
      deep: true,
      handler(val) {
        this.initFile(val)
      },
    },
  },
  created() {
    const token = Vue.ls.get(ACCESS_TOKEN)
    this.token = token
    this.headers = { 'X-Access-Token': token }
    this.initFile(this.value)
  },
  methods: {
    initFile(val) {
      if (val instanceof Array) {
        this.initFileList(val.join(','))
      } else {
        this.initFileList(val)
      }
    },
    isWord(fileType) {
      const wordTypeArray = ['doc', 'docx']
      const isWord = wordTypeArray.some((type) => {
        return fileType.toString().toUpperCase().includes(type.toString().toUpperCase())
      })
      return isWord
    },
    isExcel(fileType) {
      const excelTypeArray = ['XLS', 'XLSX', 'XLSB', 'XLSM', 'XLST', 'sheet']
      const isExcel = excelTypeArray.some((type) => {
        return fileType.toString().toUpperCase().includes(type.toString().toUpperCase())
      })
      return isExcel
    },
    isImg(fileType) {
      const imgTypeArray = ['BMP', 'JPG', 'JPEG', 'PNG', 'GIF']
      const isImgType = imgTypeArray.some((type) => {
        return fileType.toString().toUpperCase().includes(type.toString().toUpperCase())
      })
      return isImgType
    },
    isPdf(fileType) {
      const pdfTypeArray = ['PDF']
      const isPdfType = pdfTypeArray.some((type) => {
        return fileType.toString().toUpperCase().includes(type.toString().toUpperCase())
      })
      return isPdfType
    },
    renderDisplayName(name) {
      return name
    },
    async customRequest(file) {
      const form = new FormData()
      form.append('file', file.file)
      form.append('biz', this.bizPath)
      try {
        this.uploadLoading = true
        const res = await postAction(this.uploadActionUrl, form)
        if (res.success) {
          this.picUrl = true
          const length = this.fileList.length
          const url = getFileAccessHttpUrl(res.message)
          const type = res.message ? res.message.split('.')[res.message.split('.').length - 1] : 'null'
          const addFile = {
            uid: uidGenerator(),
            type: type,
            name: this.renderDisplayName(file.file.name),
            status: 'done',
            response: {
              status: 'done',
              message: res.message,
            },
            url: url,
            message: res.message,
            index: length,
          }
          this.fileList.push(addFile)
          this.$message.success('上传成功')
          this.$emit('change', this.fileList.map((item) => item.message).join(','))
        } else {
          this.$message.error('上传失败')
        }
        this.uploadLoading = false
      } catch (r) {
        this.uploadLoading = false
        this.$message.error('上传失败')
        console.warn(r)
      }
    },
    transformFile(file) {
      return new Promise((resolve) => {
        const currentTime = new Date()
        const type = file.type.split('/')
        const renameFile = new File([file], currentTime.valueOf() + '.' + type[1], { type: file.type })
        resolve(renameFile)
      })
    },
    previewPdf(file) {
      const prefixUrl = this.staticUrl
      const path = file.response.message
      const fileUrl = prefixUrl + path
      return getAction(`/mybiz/myfile/preview/${fileUrl}`).then((previewUrl) => {
        if (previewUrl.toString().indexOf('http://') === 0) {
          const page = window.open(previewUrl)
          console.warn('page', page)
        } else {
          const page = window.open('http://' + previewUrl)
          console.warn('page', page)
        }
      })
    },
    previewImg(file) {
      this.previewImage = file.url
      this.previewVisible = true
    },
    previewExcel(file) {
      console.log('previewExcel', file)
      // 创建blob对象，解析流数据
    },
    previewFile(file) {
      const fileType = file.type
      console.log('fileType', fileType)
      if (this.isImg(fileType)) {
        return this.previewImg(file)
      } else {
        return this.previewPdf(file)
      }
    },
    initFileList(paths) {
      this.fileList = []
      if (!paths || paths.length === 0) {
        return 0
      }
      paths.split(',').forEach((item, index) => {
        const url = getFileAccessHttpUrl(item)
        const name = getFileName(item)
        const type = name && name.split('.').length ? name.split('.')[name.split('.').length - 1] : 'null'
        this.fileList.push({
          uid: uidGenerator(),
          name: this.renderDisplayName(name),
          type: type,
          status: 'done',
          url: url,
          response: {
            status: 'history',
            message: item,
          },
          message: item,
          index: index,
        })
      })
    },
    beforeUpload(file) {
      console.log('file', file)
      const fileType = file.name.split('.')[file.name.split('.').length - 1]
      // console.log('fileType', fileType)
      if (!this.isImg(fileType) && !this.isPdf(fileType)) {
        this.$message.warning('请上传图片或PDF')
        return false
      }
    },
    // 自定义预览
    handlePreview(file) {
      return new Promise((resolve, reject) => {
        try {
          resolve(this.previewFile(file))
        } catch (r) {
          reject(r)
        }
      })
    },
    handleDelete(file) {
      this.fileList = this.fileList.filter((item) => item.uid!== file.uid)
    },
    handleCancel() {
      this.close()
    },
    close() {
      this.previewImage = ''
      this.previewVisible = false
    },
  },
  model: {
    prop: 'value',
    event: 'change',
  },
}
</script>
<style scoped>
.upload-name-view {
  max-width: 80px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.upload-icon-view {
  position: relative;
  max-height: 48px;
  min-height: 48px;
  font-size: 32px;
  padding: 2px 10px 2px 2px;
  color: #0071fc;
}
.after-icon {
  line-height: 48px;
}
.file-list-box {
  position: relative;
  height: 66px;
  line-height: 48px;
  padding: 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  margin-top: 10px;
  width: fit-content;
}
</style>

install封装vue组件

抛出去install在入口调用即可

import JFileUpload from './JFileUpload.vue'
export default {
  install(Vue) {
    Vue.component(JFileUpload.name, JFileUpload)
  },
}

结束

本文分享到这结束，如有错误或者不足之处欢迎指出，感谢大家的阅读！


文章标签：
JavaScript
前端开发
资源调度
yma16
目录
相关文章
JYeontu
|
7月前
|
JavaScript 前端开发 算法
简化文件上传流程：学习如何封装Vue2拖拽上传组件
简化文件上传流程：学习如何封装Vue2拖拽上传组件
JYeontu
142 0
No8g攻城狮
|
前端开发 JavaScript 安全
【前端相关】elementui使用el-upload组件实现自定义上传
【前端相关】elementui使用el-upload组件实现自定义上传
No8g攻城狮
905 0
diygwcom
|
2月前
|
JavaScript 前端开发 数据可视化
Element Plus图片上传组件二次扩展
Element Plus图片上传组件二次扩展
diygwcom
97 0
yma16
|
7月前
|
前端开发
elementui_上传组件方法自定义（formData）
elementui_上传组件方法自定义（formData）
yma16
91 1
迪_迦
|
JavaScript 前端开发 开发者
vue封装单文件弹窗组件
  VUE想要实现一个普通弹窗，想必对于大部分前端开发者来说实现起来都是非常简单一件事情，但是如果说要封装某一个具体需求效果，可能就难倒不少同学 ，由此可见 从实现到封装这个过程是非常考验个人能力的！
迪_迦
148 0
温柔归故里
|
7月前
|
JavaScript 前端开发 小程序
vue如何封装一个上传多张图片的组件
vue如何封装一个上传多张图片的组件
温柔归故里
70 0
游客onesoximwfy4q
基于element-plus实现vue3+ts后台管理系统的组件封装(只需传入配置对象，就可以渲染出一个页面(表单+表格))
基于element-plus实现vue3+ts后台管理系统的组件封装(只需传入配置对象，就可以渲染出一个页面(表单+表格))
游客onesoximwfy4q
1004 0
子玉欸
|
JavaScript
vue中使用上传图片组件后上传接口的方法
vue中使用上传图片组件后上传接口的方法
子玉欸
50 0
Heartprotection
|
移动开发 JavaScript
Vue H5页面长按保存为图片
Vue H5页面长按保存为图片
Heartprotection
262 1
卡尔特斯
|
JavaScript
Vue Antdv 上传组件（a-upload、a-upload-dragger）二次封装（DZMAntdvUpload）
Vue Antdv 上传组件（a-upload、a-upload-dragger）二次封装（DZMAntdvUpload）
卡尔特斯
1219 0

热门文章

最新文章

  • 1
    四大触点，教你从“用户视角”构建数据分析体系
  • 2
    《Stata统计分析与应用（第2版）》一3.4 图形的保存、合并及修改
  • 3
    Spring-boot+Dubbo应用启停源码分析
  • 4
    分享一些OpenStack的qcow2格式实例镜像
  • 5
    基于区块链的机器学习模型创建方案
  • 6
    微信web开发者工具无法打开的六种解决方法
  • 7
    RocketMq-Request-Reply消息
  • 8
    [译] 构建世界上最快的会议网站
  • 9
    " "(双引号)与 ' '(单引号)的区别
  • 10
    自定义高效支持点击监听的RecyclerView
  • 1
    AI在电子商务中的个性化推荐系统：驱动用户体验升级
    31
  • 2
    基于AI的网络流量分析：构建智能化运维体系
    27
  • 3
    鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0（Next）】
    25
  • 4
    HarmonyOS 5.0 （Next）应用开发实战：使用ArkTS构建开箱即用的登录页面【HarmonyOS 5.0（Next）】
    30
  • 5
    开箱即用的个人主页页面开发实战—基于HarmonyOS 5.0 （Next）和ArkTS的实现【HarmonyOS 5.0（Next）】
    34
  • 6
    《Java 在 3D 视觉与重建领域：开启无限可能之旅》
    22
  • 7
    《Java 情感分析：前沿技术与方法全解析》
    27
  • 8
    《GraalVM：Java AI 应用性能与启动速度的优化利器》
    22
  • 9
    《探索 Apache Spark MLlib 与 Java 结合的卓越之道》
    19
  • 10
    云产品评测
    21

    • 相关电子书

    更多
  • 利用编译将 Vue 组件转成 React 组件
  • 23-Vue.js在前端...1506518547.pdf
  • 函数计算最佳实践：快速开发一个分布式 Puppeteer 网页截图服务

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • ROS模板参数动态展示
    • 下一篇
    【案例实战】SpringBoot整合阿里云文件上传OSS