直播带货源码，二次封装a-upload组件，自定义上传预览

入参是本地上传的文件流

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

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

自定义预览

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

调整props和a-uoload一致

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