添加上传文件组件、上传文件（自动上传）组件

long

2021-06-11 92f93fb7396cd7981276d401eb4345e6931e1fb7

添加上传文件组件、上传文件（自动上传）组件

 src/components_simple/UploadSingleFile.vue

New file
@@ -0,0 +1,114 @@
<template>
  <div>
    <!-- 上传文件组件(单) -->
    <el-upload
      ref="refUploadFile"
      :auto-upload="false"
      action="#"
      :limit="1"
      :file-list="uploadFiles"
      :on-change="addUploadFile"
      :on-remove="delUploadFile"
      :http-request="uploadFile"
      :before-upload="beforeUploadFile"
      size="mini"
    >
      <el-button style="display: block" :disabled="uploadFiles&&uploadFiles.length>0" class="mb8" type="primary" size="small" icon="el-icon-plus">上传文件</el-button>
    </el-upload>
  </div>
</template>

<script>
import mixin_upload from '@/mixins/upload.js' // 通用上传文件预览
export default {
  mixins: [mixin_upload],
  model: {
    prop: 'uploadFiles',
    event: 'change'
  },
  props: {
    uploadFiles: {
      type: Array,
      default: () => {
        return []
      }
    }

  },

  data() {
    return {
      callback: null
    }
  },

  methods: {
    // 上传文件 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    // 上传前确认格式
    beforeUploadFile(file) {
      const isTooLarge = file.size / 1024 / 1024 > 50
      let flag = true
      if (isTooLarge) {
        this.$message.error('请勿上传大于50MB的文件')
        flag = false
      }
      return flag
    },
    // 增加文件
    addUploadFile(file, fileList) {
      this.$emit('change', fileList)
    },
    // 删除文件
    delUploadFile(file, fileList) {
      this.$emit('change', fileList)
    },
    // 执行上传商品图
    runUploadFile(suc_cb) {
      if (this.checkNeedUpload(this.uploadFiles)) {
        this.callback = suc_cb
        this.$refs.refUploadFile.submit()
      } else {
        suc_cb && suc_cb()
      }
    },
    // 上传文件
    uploadFile(res) {
      console.log(res)
      const file = res.file
      const formData = new FormData()
      formData.append('file', file)
      this.postFN({
        url: 'admin/image/upload?type=3',
        header: { 'Content-Type': 'multipart/form-data' },
        params: formData,
        mockData: {
          code: 100,
          msg: '',
          data: {
            path: '上传文件成功'
          }
        }
      }, (inf) => {
        // 替换掉未上传的文件
        this.$emit('change', [{ name: '素材' + this.extname(inf.path), url: inf.path, status: 'success' }])

        console.log('上传文件成功且结束')

        // 提交
        // this.$set(this.dialogData, 'path', inf.path)
        this.callback && this.callback(inf.path)
      })
    },
    // 获取文件后缀名
    extname(filename) {
      if (!filename || typeof filename !== 'string') {
        return ''
      }
      const a = filename.split('').reverse().join('')
      const b = a.substring(0, a.search(/\./)).split('').reverse().join('')
      return b
    }
    // 上传文件 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
  }
}
</script>

 src/components_simple/UploadSingleFileAuto.vue

New file
@@ -0,0 +1,180 @@
<template>
  <div>
    <!-- accept="video/mp4" -->
    <el-upload
      ref="refUploadFile"
      action="#"
      :before-upload="beforeUploadFile"
      :limit="1"
      :accept="accept"
      :file-list="uploadFiles"
      :on-change="addUploadImg"
      :on-remove="delUploadImg"
      :http-request="reqUploadFile"
      style="width: 200px"
    >
      <el-button style="display: block" :disabled="uploadFiles&&uploadFiles.length>0" class="mb8" type="primary" size="small" icon="el-icon-plus">上传文件</el-button>
      <div @click.stop>
        <!-- 视频 -->
        <video
          v-if="type===0&&uploadFiles.length"
          class="com-up-video"
          :src="uploadFiles[0].url"
          controls="controls"
        >您的浏览器不支持视频播放</video>
        <!-- 音频 -->
        <audio
          v-if="type===1&&uploadFiles.length"
          :src="uploadFiles[0].url"
          style="width: 230px;height: 40px;"
          controls="controls"
        />
        <!-- 图片 -->
        <el-image
          v-if="type===2&&uploadFiles.length"
          class="com-up-video"
          :src="uploadFiles[0].url"
          fit="contain"
          :preview-src-list="[uploadFiles[0].url]"
        />
      </div>
    </el-upload>

    <!-- upload放大图片 -->
    <el-dialog :visible.sync="uploadPreviewVisible" append-to-body style="text-align:center">
      <img style="max-width:100%" :src="uploadPreviewUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import mixin_upload from '@/mixins/upload.js' // 通用上传文件预览
export default {
  mixins: [mixin_upload],
  model: {
    prop: 'uploadFiles',
    event: 'change'
  },
  props: {
    uploadFiles: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 0视频1音频2图片
    type: {
      type: Number,
      default: 0
    }

  },

  data() {
    return {
      callback: null,
      isCanAdd: true,
      accept: 'video/mp4'
    }
  },
  watch: {
    type(type) {
      if (this.type === 0) this.accept = 'video/mp4'
      if (this.type === 1) this.accept = 'audio/mp3,audio/mpeg'
      if (this.type === 2) this.accept = 'image/jpeg,image/jpg,image/gif,image/png'
    }
  },
  methods: {
    // 上传文件 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    // 上传前回调
    beforeUploadFile(file) {
      if (this.type === 0) this.beforeUploadVideo(file)
      if (this.type === 1) this.beforeUploadAudio(file)
      if (this.type === 2) this.beforeUploadImg(file)
    },
    beforeUploadVideo(file) {
      var fileSize = file.size / 1024 / 1024 < 50
      if (['video/mp4'].indexOf(file.type) === -1) {
        this.$message.error('必须是mp4文件')
        return false
      }
      if (!fileSize) {
        this.$message.error('视频大小不能超过50MB')
        return false
      }
    },
    beforeUploadAudio(file) {
      console.log('file.type', file.type)
      var fileSize = file.size / 1024 / 1024 < 50
      if (['audio/mp3'].indexOf(file.type) === -1 && ['audio/mpeg'].indexOf(file.type) === -1) {
        this.$message.error('必须是mp3文件')
        return false
      }
      if (!fileSize) {
        this.$message.error('音频大小不能超过50MB')
        return false
      }
    },
    beforeUploadImg(file) {
      const isImg = file.type.indexOf('image/') > -1
      const isTooLarge = file.size / 1024 / 1024 > 4
      if (!isImg) {
        this.$message.error('必须是选择图片文件')
        return false
      } else if (isTooLarge) {
        this.$message.error('请勿上传大于4MB的图片')
        return false
      }
    },
    // 增加文件
    addUploadImg(file, fileList) {
      this.$emit('change', fileList)
      console.log(fileList)
    },
    // 删除文件
    delUploadImg(file, fileList) {
      this.$emit('change', fileList)
    },

    // 上传文件 uploadType 0图片1视频2音频
    reqUploadFile(res) {
      var uploadType = 0
      if (this.type === 0) uploadType = 1
      if (this.type === 1) uploadType = 2
      if (this.type === 2) uploadType = 0
      const file = res.file
      const formData = new FormData()
      formData.append('file', file)
      this.postFN({
        url: 'admin/image/upload?type=' + uploadType,
        header: { 'Content-Type': 'multipart/form-data' },
        params: formData,
        mockData: {
          code: 100,
          msg: '',
          data: {
            // path: 'https://music.163.com/song/media/outer/url?id=1805088448.mp3'
            path: 'https://www.w3school.com.cn/i/movie.mp4'
          }
        }
      }, (inf) => {
        // 替换掉未上传的图片
        this.$emit('change', [{ name: '素材', url: inf.path, status: 'success' }])

        console.log('上传文件成功且结束')

        // 提交
        // this.$set(this.dialogData, 'imgUrl', inf.imgUrl)
        this.callback && this.callback(inf.path)
      })
    }
    // 上传文件 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
  }
}
</script>

<style>
.el-upload-list__item{
  transition: none;
}
</style>